AngularJS: How do I insert window.setTimeout into the scope function?

Question

$scope.runTest = function() {
    var statesArray = ['Running', 'Complete', 'Rejected'];
    var rand = statesArray[Math.floor(Math.random() * statesArray.length)];
    item.state = 'Running';
    console.log(rand)
    window.setTimeout(function() {
        item.state = rand;
    }, 6000);
};

item state change to Running is successful, but after that state won't change to a random as stated in the window.setTimeout function.

Where am I wrong here?

score 3 · Answer 1 · answered Dec 18 '15 at 17:39

3

you should use angular's $timeout service

$timeout(function() {
    item.state = rand;
}, 6000);

answered Dec 18 '15 at 17:39

ivcandela

331
3
12

score 2 · Answer 2 · edited May 23 '17 at 10:33

2

Windows.setTimeout is out side an angular scope

you have to use $scope.$apply() to bind that value.

or use $timeout

refer this What advantage is there in using the $timeout in Angular JS instead of window.setTimeout?

edited May 23 '17 at 10:33

Community

1
1

answered Dec 18 '15 at 17:38

gaurav bhavsar

2,033
2
22
36

score 2 · Answer 3 · edited May 23 '17 at 10:28

You can use setTimeout or $timeout, the problem here is that you are forgetting to call scope.apply() when using setTimeout to ensure that any changes to the scope will be reflected elsewhere.

setTimeout(function () {
    $scope.$apply(function () {
        item.state = rand;
    });
}, 6000);

If you use $timeout you don't need to use $scope.$apply():

$timeout(function() {
    item.state = rand;
}, 6000);

For more info regarding these two concepts, take a look at What advantage is there in using the $timeout in Angular JS instead of window.setTimeout?.

AngularJS: How do I insert window.setTimeout into the scope function?

3 Answers3