ng-Table not rendering new data when reloading request

问题:

i have page with ng-table which works fine with initial data. I have a select box which send server request based on the option selected and then Iam getting new data to angular but is not updated with ng-table.

Here is my view:

 
     
                 {{column.title}}             
         
                 {{user[column.field]}}             
         
 

My controller:

angular.module('reports').controller('ReportsController', ['$scope', '$stateParams', '$location', 'Authentication', 'Reports', '$filter', 'ngTableParams', function($scope, $stateParams, $location, Authentication, Reports, $filter, ngTableParams ) {     $scope.reportBillingPeriod = 0;     $scope.$watch('reportBillingPeriod', function(newValue, oldValue) {         $scope.findReportData( newValue );     });     //$scope.reportBillingData = 0;       $scope.findReportData = function( selectedMonth ){         var selectedPeriod = selectedMonth;         if( selectedPeriod === null )         selectedPeriod = '0';         $scope.customers_report = Reports.customer_report({         monthReport: selectedPeriod         }, function( result ){         var data = result.customers;         $scope.columns = [             { title: 'Account Name', field: 'accountName', visible: true, filter: { 'name': 'text' } },             { title: 'Gross Revenue', field: 'planTotalAmount', visible: true }         ];     $scope.$watch('result', function () {         $scope.tableParams.settings().$scope = $scope;         $scope.tableParams.reload();      });          $scope.tableParams = new ngTableParams({             page: 1,            // show first page             count: 10,          // count per page             filter: {             name: 'O'       // initial filter             }         }, {             total: data.length, // length of data             getData: function($defer, params) {             var orderedData = params.sorting() ? $filter('orderBy')(data, params.orderBy()) : data;             $defer.resolve(orderedData.slice((params.page() - 1) * params.count(), params.page() * params.count()));             //$scope.reportBillingData = new Date();             }         });         });     }; }]); 

回答1:

$scope.$watch('result', function () {         $scope.tableParams.settings().$scope = $scope; <<--nested scope is replacing!!         $scope.tableParams.reload();      }); 

ngTable directive create nested scope which inculde all settings for directive to work,so you shoudn't replace it with scope of ReportsController
you need to remove this row $scope.tableParams.settings().$scope = $scope;
And you need to specify all parameters for ngTable,please have a look here In ngTables, running $scope.tableParams.reload() for the third time results in TypeError: Cannot set property '$data' of null

UPDATE and also it's better take ngTableParams intialization and $watch for result outside findReportData function in order to prevent errors and unnecessary re-initialization

UPDATE 2 i set up plunk,try to make it more look like original question,and mock httpservice, but that's not matter,all data access must be going inside getData func in ngTableParams and when set up all filter you need to call(or maybe just using $watch like in plunk) you have to call $scope.tableParams.reload(); ,you can try to type some numbers in input