How to properly use the AngularJS digest cycle

Question

I've been looking into the caveats of the AngularJS Digest cycle and I would like to better understand where the separation is between using it properly and improperly.

For example, if I have an AngularJS code that looks like this:

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

myApp.controller("testController", ["$scope", "$timeout", function($scope, $timeout){
    setTimeout(function(){
        $scope.username = "Test User name";
    }, 3000);

    $timeout(function(){
        $scope.username = "AngularJS User name";
    }, 3000);
}]);

Why is setTimeout not being used as part of the Digest Cycle, whereas $timeout is, and how can I fix this to work?

Please keep in mind, I am looking not only for a code solution but for an explanation of why this occurs. As good as a code solution may come, it will not explain itself.

Answer 1

$timeout is an angularized version of setTimeout(), i.e. it is coded in such a way that it triggers a digest cycle. setTimeout() is a plain Javascript function that knows nothing about Angular or a digest cycle. Since setTimeout() is not a simple JS object, Angular cannot $watch it.

So the whole point of having functionality like $timeout is that they are angular-friendly versions of some Javascript functionality.

Answer 2

$timeout() and setTimeout() are not the same, $timeout is angularised.

It uses promise ($q service) internally, which would resolve after every digest cycle, automatically. Whereas setTimeout(), is just a trick with registering your callback function in the queue.

If you want setTimeout() to be part of digest loop, call it within the $scope.$apply():

setTimeout(function(){
    $scope.$apply(function(){
        $scope.username = "Test User name";
    });
}, 3000));

Answer 3

A more generic explanation is that setTimeout does not work inside of angular because it puts its callback on the event loop, which angular does not watch. The same situation would happen if you were to create an XMLHttpRequest directly instead of $http.

Angular has made their own abstraction of these utilities/objects so that when they finish, the digest cycle will pick up any changes.