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

app.run(function($q){
  
  $q.each = function(promises){
    
    var deferred = $q.defer();
    
    promises.forEach(function(promise){
      promise.then(function(data){
        deferred.notify(data);
      });
    });
    
    return deferred.promise;
  };
  
});

app.controller('MainCtrl', function($scope, $q, $timeout) {
  
  var promises = [
    $timeout(a('a'), 1000),  
    $timeout(a('b'), 500), 
    $timeout(a('c'), 3000), 
    $timeout(a('d'), 1500), 
  ];
  $scope.values = [];
  
  $scope.values.push('start - ' + new Date().toISOString());
  $q.each(promises).then(null,null,function(data){
    $scope.values.push(data + ' - ' + new Date().toISOString());
  });
  
  function a(v){ return () => v; }
});
<!DOCTYPE html>
<html ng-app="plunker">

  <head>
    <meta charset="utf-8" />
    <title>AngularJS Plunker</title>
    <script>document.write('<base href="' + document.location + '" />');</script>
    <link href="style.css" rel="stylesheet" />
    <script src="https://code.angularjs.org/1.5.4/angular.js"></script>
    <!-- By setting the version to snapshot (available for all modules), you can test with the latest master version -->
    <!--<script src="https://code.angularjs.org/snapshot/angular.js"></script>-->
    <script src="app.js"></script>
  </head>

  <body ng-controller="MainCtrl">
    
    <ul>
      <li ng-repeat="val in values">{{val}}</li>
    </ul>
    
  </body>
</html>
/* Put your css in here */