Smart Table (AngularJs) async data change not updating

Question

I have a table, made using Smart Table in AngularJs.

I am trying to fetching new data and adding to this table using ajax. I push to $scope.rowCollection in ajax call back. However why the newly added data is not displaying in the table? (I am using st-safe-src, and I am adding new data to the collection in st-safe-src.)

Another question is: do I have to add $scope.displayedCollection = [].concat($scope.rowCollection); every time st-safe-src is changed? (adding this line does not solve the issue)

I created this Plunkr with timeout to simulate the ajax call back.

Thanks!

Answer 1

I fixed your plunkr by updating the timeout code so that invoked $scope.$apply. You should use $scope.$apply to make sure that angular JS components are notified that angular JS models have been changed when you use a non-angular AJAX call (like jQuery) or with core JS callbacks (like jQuery): http://plnkr.co/edit/iI7zpSjmB2db4ryHuzp7?p=preview

      // use $timeout service so that we can automatically invoke 
      // the appropriate apply
      $timeout(function () {
        $scope.rowCollection.push({firstName: 'Laurent', lastName: 'Renard', birthDate: new Date('1987-05-21'), balance: 102, email: 'whatever@gmail.com'});
        // do I need this?
        $scope.displayedCollection = [].concat($scope.rowCollection);
        console.log("executed");
      }, 2000, true);

You could also do this as follows:

      setTimeout(function () {
        $scope.$apply(function () {
          $scope.rowCollection.push({firstName: 'Laurent', lastName: 'Renard', birthDate: new Date('1987-05-21'), balance: 102, email: 'whatever@gmail.com'});
          // do I need this?
          $scope.displayedCollection = [].concat($scope.rowCollection);
        });
        console.log("executed");
      }, 2000);