Angular: updating $ scope does not work in setTimeout callback

Question

In angular.js, $scope.greeting = xxx does not work in window.setTimeout . This has no 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?

A full comparison is given below:

• It works (in ajax): http://jsfiddle.net/victorwoo/eDb2S/129/
• This does not work (in window.setTimeout ): http://jsfiddle.net/victorwoo/3b3s6ukp/2/

Answer 1

setTimeout works outside the $digest loop, so angular doesn't know about the change you applied to $scope .

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

See here (your) updated jsfiddle here

Answer 2

I think you should use a special service from angular

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

Answer 3

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

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