Angular Datatables Not Applying Correctly

Question

Here is my html code:

<div ng-controller="withAjaxCtrl">
 <table datatable="" dt-options="dtOptions" dt-columns="dtColumns" class="row-border hover"></table>
</div>

Here is my controller:

(function () {
var manageBackOrdersController = function ($scope, $http, $routeParams) {
 $http({
 url: '/Profiles/firstJson',
 method: "GET",
 params: {}
 }).success(function (data) {
 var JSON = data;
 $scope.data = JSON;
 });
} 
manageBackOrdersController.$inject = ['$scope', '$http', '$routeParams'];
angular.module('customersApp')
 .controller('manageOrdersController', manageOrdersController);
angular.module('datatablesSampleApp', ['datatables'])
 .controller('withAjaxCtrl', function ($scope, DTOptionsBuilder, DTColumnBuilder) {
 $scope.dtOptions = DTOptionsBuilder.fromSource('scope.data')
 .withPaginationType('full_numbers');
 $scope.dtColumns = [
 DTColumnBuilder.newColumn('Customer').withTitle('Customer')
 ];
 });
}());

When I run my page I get an error saying "Error: [ng:areq] Argument 'withAjaxCtrl' is not a function, got undefined". My data is found stored in $scope.data.

Answer 1

Respectfully, Sameer's answer is incorrect. It took me two long arduoous days but I found the solution.

What you must keep in mind are 2 concerns:

1. Use DTOptionsBuilder.fromFnPromise, and
2. Have your promise inside your factory.

This is the correct solution:

'use strict';
 WithResponsiveCtrl.$inject = ['DTOptionsBuilder', 'DTColumnBuilder', 'simpleFactory'];
 angular.module('showcase.withResponsive', [])
.controller('WithResponsiveCtrl', WithResponsiveCtrl);
function WithResponsiveCtrl(DTOptionsBuilder, DTColumnBuilder, simpleFactory) {
var vm = this;
vm.dtOptions = DTOptionsBuilder.fromFnPromise(function() {
 return simpleFactory.getData(); }).withPaginationType('full_numbers')
 // Active Responsive plugin
 .withOption('responsive', true);
vm.dtColumns = [
 DTColumnBuilder.newColumn('id').withTitle('ID'),
 DTColumnBuilder.newColumn('firstName').withTitle('First name'),
 // .notVisible() does not work in this case. Use .withClass('none') instead
 DTColumnBuilder.newColumn('lastName').withTitle('Last name').withClass('none')
]; }

---

simpleFactory.$inject = ['$http', '$q', '$log'];
angular.module('showcase.withResponsive').factory('simpleFactory', simpleFactory); 
function simpleFactory($http, $q, $log) {
return {
 getData: function () {
 var deferred = $q.defer();
 $http.get('api/data.json')
 .success(function (data) {
 deferred.resolve(data);
 }).error(function (msg, code) {
 deferred.reject(msg);
 $log.error(msg, code);
 });
 return deferred.promise;
 }
} };

• Sameer Shemna: thanks for the update @user1177440 , that answer was just given on the top of my head that time, thus mentioned 'try replacing', anyways I will remove my answer and upvote yours, keep up the good work
• Sameer Shemna: Oh I tried deleting it, it says I cant delete an accepted answer