Angular JS - Variable Updating With Interval

angularjs, javascript

Solution

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.

Problem

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).

Original source