javascript - AngularJS ngcontroller to be reloading data periodically

Question

I have this working implementation af a angularJS app which fetches some links from an URL and paint them. However the links on the URL are being updated constantly, I would like to update periodcially this $scope.listlinks, let say every 10 seconds.

I tried playing with setInterval with no luck.

Javascript

var App = angular.module('App', []);
App.controller('ListLinksCtrl', 
function get($scope, $http ) {
  $http.get('http://example_url.com/my_changing_links_json').then(
       function(res){$scope.listlinks = res.data;});
}
);

HTML

<div id="cnt1" ng-controller="ListLinksCtrl">
   <div ng-repeat="singlelink in listlinks">
        <a href="{{ singlelink.url }}"> 
           {{ singlelink.destination }} 
        </a>
   </div>
</div>

Answer 1

While jvandemo's answer will work, I think it can be improved slightly. By using setInterval, it breaks the dependency injection convention that Angular follows and makes unit testing of the controller difficult.

Angular doesn't currently support setInterval through its built-in services, but you can use the $timeout service to produce the same functionality. I'd change the controller to this:

app.controller('MainCtrl', function($scope, $http, $timeout) {

  // Function to get the data
  $scope.getData = function(){
    $http.get('style.css')
      .success(function(data, status, headers, config) {

      // Your code here
      console.log('Fetched data!');
    });
  };

  // Function to replicate setInterval using $timeout service.
  $scope.intervalFunction = function(){
    $timeout(function() {
      $scope.getData();
      $scope.intervalFunction();
    }, 1000)
  };

  // Kick off the interval
  $scope.intervalFunction();

});