Wait for multiple promises

$q.all()

by jdmarshall

HTML

<script src="https://code.angularjs.org/1.2.12/angular.js"></script>
<div ng-controller="MyCtrl">
    <h2>Use all() to coordinate multiple promises</h2>
    <div class="output">Output: {{output}}</div>
    <div class="input">
        <button ng-click='doClick1()'>Click me</button>
        <button ng-click='doClick2()'>Click me too</button>
    </div>
</div>

CSS

body{
    padding: 10px;
}

.input, .output {
    padding: 10px;
}

.output {
    height: 20px;
}

JavaScript

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

function MyCtrl($scope, $q) {
    $scope.output = "";
    
    var deferred1 = $q.defer();
    var deferred2 = $q.defer();
    
    $scope.doClick1 = function() {
        deferred1.resolve("A");
    };
    
    $scope.doClick2 = function() {
        deferred2.resolve("B");
    };
    
    $q.all([deferred1.promise, deferred2.promise]).then(function(val1, val2) {
        $scope.output = "Everything finished!";
    });
}