Angular: update $scope doesn't work in setTimeout callback

Question

In angular.js, $scope.greeting = xxx doesn't work in window.setTimeout. It has not any effect:

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

myApp.controller('MyCtrl', function ($scope) {
    $scope.greeting = 'init';
    window.setTimeout(function () {
        console.log('update greeting');
        $scope.greeting = "hello"; // doesn't work here.
    }, 3000);
})

Why?

The full comparison is below:

It works (in ajax): http://jsfiddle.net/victorwoo/eDb2S/129/
It doesn't work (in window.setTimeout): http://jsfiddle.net/victorwoo/3b3s6ukp/2/

Caspar Harmer · Accepted Answer · 2014-08-21 03:49:38Z

16

setTimeout operates outside of the $digest cycle - therefore angular doesn't know about the change that you applied to $scope.

Instead of window.setTimeout, use the built in $timeout function

See this (your) updated jsfiddle here

edited Aug 21, 2014 at 3:49

answered Aug 21, 2014 at 3:43

Caspar Harmer

8,1372 gold badges46 silver badges41 bronze badges

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

1 Comment

manutdfan Over a year ago

You can also use $scope.$apply within your setTimeout. But $timeout is definitely better.

Farkhat Mikhalko · Accepted Answer · 2014-08-21 03:44:46Z

4

I think you must use special service from angular

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

myApp.controller('MyCtrl', function ($scope, $timeout) {
    $scope.greeting = 'init';
    $timeout(function(){
        $scope.greeting = "hello";
    }, 2000);
})

answered Aug 21, 2014 at 3:44

Farkhat Mikhalko

3,6653 gold badges26 silver badges39 bronze badges

Comments

Vahid Najafi · Accepted Answer · 2017-03-15 08:24:34Z

0

In this case, (as mentioned in answers) you can use $timeout instead of setTimeout. But in all cases you can use $scope.$apply() to change the $scope that is outside of the $digest cycle.

window.setTimeout(function () {
    $scope.greeting = "hello";
    $scope.$apply();
}, 3000);

answered Mar 15, 2017 at 8:24

Vahid Najafi

5,38311 gold badges53 silver badges98 bronze badges

Collectives™ on Stack Overflow

Angular: update $scope doesn't work in setTimeout callback

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related