Angular JS - Variable Updating With Interval

Question

Do angular models work with setIntervaL?

Here's an example.. if I have

<p>{{number}}</p>
<button ng-click="testFunc()">TEST</button>

For some reason it updates WITHOUT setInterval, but like this it doesn't:

scope.testFunc = function(){
    setInterval(function(){
        scope.number--;
    },1000);
};

Without setInterval the number will update every single click, but with setInverval it won't update continuously. If I click it every 5 seconds it'll jump a bunch of numbers up (so it's running in the background but the view isn't updating).

Answer 1

What's happening is that you're using setInterval which is outside of "Angular's world" so it's not updating the DOM. You have two options, one is a lot better than the other.

Use $interval. It's just like setInterval except it's part of the Angular world, so those changes will update your view (be sure to pass $interval into your directive).

scope.testFunc = function(){
    $interval(function(){
        scope.number--;
    },1000);
};

The second option is to call apply() on your current code to kick off a digest cycle, don't do that though since there is a better option.

Answer 2

See the documentation for the interval in angular js Interval with Angular JS

You don't to use the $digest to work with interval. See the code below:

HTML

<div ng-app ng-controller="ApplicationController">   
    <pre>Number: {{ number }}</pre>
    <button ng-click="testTimer()">Test Timer</button>
</div>

JS

function ApplicationController($scope,$interval) {

    $scope.number = 99999;

    $scope.testTimer = function() {
        $interval(function() {
            $scope.number--;
        }, 100);
    };  
}

See this example in action here