AngularJS - $apply ex

by gavinfoley

HTML

<div ng:app ng-controller="Ctrl"> 
    <pre>
        
{{message1}}
        
{{message2}}
        
{{message3}}
    </pre>
</div>

CSS

</style> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js"></script> <style>

JavaScript

function Ctrl($scope, $timeout) {
    $scope.message1 = "Waiting 4000ms for 'setTimeout' update";
    $scope.message2 = "Waiting 3000ms for 'setTimeout w/ $apply' update";
    $scope.message3 = "Waiting 2000ms for '$timeout' update";

    // Bad - 'message1' won't be updated until next $digest cycle, which may never happen
    setTimeout(function () {
        $scope.message1 = "Timeout called!";
    }, 4000);

    // Better
    setTimeout(function () {
        $scope.$apply(function () {
            $scope.message2 = "Timeout called!";
        });
    }, 3000);

    // Best
    $timeout(function () {
        $scope.message3 = "Timeout called!";        
    }, 2000);
}