Angularjs - Ng-Tble - Not Defined

Question

I'm having issues creating an ngTable. I can get arrays that create manually to render fine, but when I hook this up to my api, it fails. With no error of course, so I'm really confused why. I get a $scope.data array does get filled like expected, but the new tableParams always ends up undefined.

Here is my HTML

<div ng-app="myApp" class="container-fluid" ng-controller="demoController as demo">
    <div class="row">
        <div class="col-xs-12">
            <h2 class="page-header">Pharmacy Rebate Portal</h2>
        </div>
    </div>
    <div class="row">
        <div class="col-md-6">
            <h3>Default configuration</h3>
            <table ng-table="demo.tableParams" class="table table-condensed table-bordered table-striped">
                <tr ng-repeat="row in $data">
                    <td data-title="'Manufacturer'">{{row.manufacturer | uppercase }} </td>

                </tr>
            </table>
        </div>

    </div>
</div>

I'm using this version of ngTable. Along with 1.6.3 Angular. Any ideas?

https://unpkg.com/ng-table/bundles/ng-table.min.js

$http.get('/api/rebates').
            then(function (response) {
                $scope.data = response.data;
                $scope.tableParams = new NgTableParams({
                    page: 1,            // show first page
                    count: 10,          // count per page
                    sorting: {
                        foo: 'asc'     // initial sorting
                    }
                }, {
                        total: $scope.data.length, // length of data
                        getData: function ($defer, params) {
                            // use build-in angular filter
                            var orderedData = params.sorting() ?
                                $filter('orderBy')($scope.data, params.orderBy()) :
                                $scope.data;

                            $defer.resolve(orderedData.slice((params.page() - 1) * params.count(), params.page() * params.count()));
                        }
                    });
            });`

Answer 1

JavaScript is always synchronous. So what is happening here, $scope.data=response; is executing before $http.get('/api/rebates')... completed. It means, $scope.data undefined. To Solve this problem, I recommend to use Service.

var myApp = angular.module('myApp', []);
  myApp.controller('AppCtrl', ['$scope', '$http', function($scope, dataService){

  dataService.dataLists(function(response) {
    console.log(response.data);
    $scope.data=response.data;
    $scope.tableParams = new NgTableParams({
                    page: 1,            // show first page
                    count: 10,          // count per page
                    sorting: {
                        foo: 'asc'     // initial sorting
                    }
                }, {
                        total: $scope.data.length, // length of data
                        getData: function ($defer, params) {
                            // use build-in angular filter
                            var orderedData = params.sorting() ?
                                $filter('orderBy')($scope.data, params.orderBy()) :
                                $scope.data;

                            $defer.resolve(orderedData.slice((params.page() - 1) * params.count(), params.page() * params.count()));
                        }
                    });
  });

});
}])

myApp.service('dataService', function($http) {
    this.dataLists = function(callback){
   $http.get('/api/rebates').then(callback)
  }
});