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/

Answer 1

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