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

Alex · Accepted Answer · 2015-04-05 17:23:22Z

21

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.

edited Apr 5, 2015 at 17:23

Alex

8,3618 gold badges55 silver badges80 bronze badges

answered Apr 23, 2014 at 0:15

Tyler McGinnis

35.4k16 gold badges74 silver badges79 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

pashOCONNOR Over a year ago

Tried using $interval but it returned Error: $interval is not defined.... BUT $digest() worked

Tyler McGinnis Over a year ago

Yeah. Like I mentioned you have to pass $interval into your controller. angular.module('myCtrl', function($scope, $interval)...

Tiago Barreto · Accepted Answer · 2014-04-23 01:24:22Z

6

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

answered Apr 23, 2014 at 1:24

Tiago Barreto

82213 silver badges31 bronze badges

Comments

Limon Monte · Accepted Answer · 2016-08-06 10:39:55Z

1

Angular comes with a nice wrapper for setInterval. Use it nearly the same way.

https://docs.angularjs.org/api/ng/service/$interval

edited Aug 6, 2016 at 10:39

Limon Monte

54.8k49 gold badges191 silver badges222 bronze badges

answered Apr 23, 2014 at 0:13

tgeery

1746 bronze badges

1 Comment

tgeery Over a year ago

is it injected into your controller? myApp.controller(function($scope, $interval) {...})

blackeyebeefhorsefly · Accepted Answer · 2014-04-23 00:15:49Z

0

$interval works definitely you can learn more about it at: https://docs.angularjs.org/api/ng/service/$interval

as a further note, instead of using {{ number }} try using <p ng-model="number"></p> to show your value instead.

answered Apr 23, 2014 at 0:15

blackeyebeefhorsefly

1,9441 gold badge15 silver badges18 bronze badges

Comments

pashOCONNOR · Accepted Answer · 2014-04-23 00:24:26Z

-1

Tried using $interval but it returned Error: $interval is not defined.... BUT $digest() worked:

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

answered Apr 23, 2014 at 0:24

pashOCONNOR

5712 gold badges6 silver badges15 bronze badges

2 Comments

Tyler McGinnis Over a year ago

No! Don't do this for the reasons I mentioned in my answer.

Cybrix Over a year ago

The reason why it didn't work is because you haven't injected $interval

Collectives™ on Stack Overflow

Angular JS - Variable Updating With Interval

5 Answers 5

2 Comments

Comments

1 Comment

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

2 Comments

Comments

1 Comment

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related