Angular $q.all Demonstration

by Jeremy Likness

HTML

<div ng-app="myApp">{{status}}</div>

JavaScript

(function () {
    var app = angular.module("myApp", []);
    app.run(['$rootScope', '$timeout', '$q', function ($rootScope, $timeout, $q) {
        var firstDeferral = $q.defer(),
            secondDeferral = $q.defer();
        $timeout(function () {
            $rootScope.status = '1 Second.'; 
            firstDeferral.resolve();
        }, 1000);
        $timeout(function () {
            $rootScope.status = '2 Seconds.'; 
            secondDeferral.resolve();
        }, 2000);        
        $rootScope.status = 'Ready.';
        $q.all([firstDeferral.promise, secondDeferral.promise])
        .then(function() {
            $rootScope.status = 'All promises complete.';
        });
    }]);
})();