Angular Datatables Not Applying Correctly - angularjs

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:
Use DTOptionsBuilder.fromFnPromise, and
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;
}
} };