Angular $q.all Demonstration

by taly2808

HTML

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

JavaScript

(function () {
    var app = angular.module("myApp", []);
    
    app.run(['$rootScope', '$q', '$timeout', 
             function ($rootScope, $q, $timeout) {
                 
                 var one = $q.defer();
                 var two = $q.defer();
                 var three = $q.defer();
                 
                 function success(data){
                     $rootScope.status = data;
                 }
                 
                 $q.all([one.promise, two.promise, three.promise]).then(function(data){
                     $timeout(function(){$rootScope.status = data;}, 1000);
                 });
                 
                 one.promise.then(success);
                 two.promise.then(success);
                 three.promise.then(success);
                 
                 
                 $timeout(function(){
                     one.resolve('one done');
                 }, 2000);
                 
                 $timeout(function(){
                     two.resolve('two done');
                 }, 3000);
                 
                 $timeout(function(){
                     three.resolve('three done');
                 }, 1000);                
    }]);
})();