How to poll server in ng-repeat and stop polling on condition

Question

I have to start polling the server to get the data for multiple table rows, I am having these in ng-repeat.

    <table class="table table-bordered" >
  <tr>
    <th>Id</th>
    <th>Title</th>
   <th>Amount</th>
  <th>...
  </tr>
  <tr ng-repeat="data in dataList">
    <td>
      <div>{{ data.id }}</div>
    </td>
     <td>
      <div>{{ data.title }}</div>
    </td>
     <td>
      <div>{{ data.amount }}</div>
    </td>
  </tr>
</table>

here I have to poll for each row separately ,so that the amount increased or decreased can be viewed . When I amount reaches 100 I have to stop polling for that row.

       $scope.pollServer = function(id) {
        $scope.pollTimeout = $interval(function() {
            $scope.getAmount(id);
        }, 1000);
    }; 

can anyone suggest the best way to poll multiple threads in angular . And how to stop for an individual thread.

Answer 1

TL;DR Only update model, ngRepeat is magical.

Do your polling in a service, bind it to $scope in your controller.

app.factory('dataService', ['$http', '$q', function($http, $q){
    return {
        pollServer: function() { 
            return $http.get('url'); // do some call to API
        }   
    }
}]);

In controller:

$scope.dataListPromise = dataService.pollServer();

$q.all([dataListPromise]).then(function(results){
    $scope.dataList = results[0];
});

Remember to inject $q to controller as well. You can keep your ngRepeat the same as it is now, but it's probably a good idea to track your database results with the id from database. And because you are now dealing with a deferred, you can use ngCloak with ngRepeat to avoid showing pre-rendered $scope variables to user.