I've been trying to find a solution on the internet to be able to update my $http json request on a set interval time and at the same time have it update my bindings with the new data.

I've seen some examples using $timeout but haven't been able to get it working and just wanted to know what the best approach would be for this. Also being able to update the views with the new data pulled down is something I cant seem to solve as I haven't been able to make the new request.

Here is my current build.

app.js file, this just shows the initial fetch for the json.

    var myApp = angular.module('myApp', ['ngRoute']);

    myApp.controller('MainCtrl', ['$scope', '$http',
        function($scope, $http, $timeout) {
            $scope.Days = {};

            $http({
                method: 'GET',
                url: "data.json"
            })
                .success(function(data, status, headers, config) {
                    $scope.Days = data;
                })
                .error(function(data, status, headers, config) {
                    // something went wrong :(
                });

        }
    ]);

The HTML setup:

<ul ng-controller="MainCtrl">
  <li class="date" ng-repeat-start="day in Days">
    <strong>>{{ day.Date }}</strong>
  </li>

  <li class="item" ng-repeat-end ng-repeat="item in day.Items">
    <strong>>{{ item.Name }}</strong>
  </li>
</ul>

I've been trying to find a solution on the internet to be able to update my $http json request on a set interval time and at the same time have it update my bindings with the new data.

I've seen some examples using $timeout but haven't been able to get it working and just wanted to know what the best approach would be for this. Also being able to update the views with the new data pulled down is something I cant seem to solve as I haven't been able to make the new request.

Here is my current build.

app.js file, this just shows the initial fetch for the json.

    var myApp = angular.module('myApp', ['ngRoute']);

    myApp.controller('MainCtrl', ['$scope', '$http',
        function($scope, $http, $timeout) {
            $scope.Days = {};

            $http({
                method: 'GET',
                url: "data.json"
            })
                .success(function(data, status, headers, config) {
                    $scope.Days = data;
                })
                .error(function(data, status, headers, config) {
                    // something went wrong :(
                });

        }
    ]);

The HTML setup:

<ul ng-controller="MainCtrl">
  <li class="date" ng-repeat-start="day in Days">
    <strong>>{{ day.Date }}</strong>
  </li>

  <li class="item" ng-repeat-end ng-repeat="item in day.Items">
    <strong>>{{ item.Name }}</strong>
  </li>
</ul>

• javascript
• json
• angularjs

• I don't understand what you try to achieve. From your example you call http async call that returns Days object. The ngRepeat directive listens on Days change (has private watchers) and shows up new data. What's the problem? thanks, – Maxim Shoustin Commented Apr 20, 2014 at 11:57
• The json data I am requesting from the server is consistently being updated and I was under the impression I would need to set a timeout function to recall the $http to grab the updated json data and then update the current views. Maybe I'm still a little mistaken on how angular works. My apologies. – Anks Commented Apr 20, 2014 at 12:01
• So as I understand you want to run in loop http with some delay, right? – Maxim Shoustin Commented Apr 20, 2014 at 12:21
• Yes, like a poller. Requests the json every x seconds then updates the views if the data has changed. – Anks Commented Apr 20, 2014 at 12:28
• Use $interval to get function executed after effect few mins... and fir your requirement push services are better than $ interval – harishr Commented Apr 20, 2014 at 12:32

1 Answer 1

I would use $timeout.

As you know the $timeout return promise. So when promise is resolved we can call method myLoop once more.

In following example we call http every 10 sec.

var timer;

function myLoop() {
    // When the timeout is defined, it returns a
    // promise object.
    timer = $timeout(function () {
        console.log("Timeout executed", Date.now());
    }, 10000);

    timer.then(function () {
        console.log("Timer resolved!");

        $http({
            method: 'GET',
            url: "data.json"
        }).success(function (data, status, headers, config) {
            $scope.Days = data;
            myLoop();
        }).error(function (data, status, headers, config) {
            // something went wrong :(
        });
    }, function () {
        console.log("Timer rejected!");
    });

}

myLoop();

As a side note:

When controller is destroyed be sure to call $timeout.cancel( timer );

// When the DOM element is removed from the page,
// AngularJS will trigger the $destroy event on
// the scope. 
// Cancel timeout
$scope.$on("$destroy", function (event) {
    $timeout.cancel(timer);
});

Demo Fiddle