AngularJS Promises - $q.all()

HTML

<div ng-controller="MyCtrl">
  Promise 1: {{value1}}<br>
  Promise 2: {{value2}}<br>
  All done: {{bothValues}}
</div>

JavaScript

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

function MyCtrl($scope, $q, $timeout) {
    q1 = $scope.q1 = $q.defer(),
    q2 = $scope.q2 = $q.defer(),
    p1 = $scope.q1.promise, 
    p2 = $scope.q2.promise;
       
    $q.all([
        p1.then(function(value) { return $scope.value1 = value; }), 
        p2.then(function(value) { return $scope.value2 = value; })
    ])
    .then(function(values) {        
        $scope.bothValues = values;
    });
    
    $timeout(function() { q1.resolve(1) }, 1000);
    $timeout(function() { q2.reject(2) }, 3000);
}