title: callback after async forEach AngularJS
body: <p>How do I add a callback function after an async forEach Loop?</p>
  
  <p><em>Here is some better context:</em></p>
  
  <pre><code>$scope.getAlbums = function(user, callback) {
      $scope.albumsList.forEach(function (obj, i) {
          $scope.getAlbum(user, obj.id, function(value){
              $scope.albums.push(value);
          });
      });
      // callback(); ???
  };
  
  $scope.getAlbums('guy123', function(){
      // forEach loop is all done!
      console.log($scope.albums)
  });
  </code></pre>
  
  <p><strong>Controller:</strong></p>
  
  <pre><code>.controller('Filters', ['$scope','Imgur', function($scope, Imgur) {
  
      $scope.getAlbum = function(user, id, callback) {
          Imgur.album.get({user:user, id:id},    
              function(value) {
                  return callback(value.data);
              }
          );
      }
  
      $scope.getAlbums = function(user, callback) {
          // Callback function at end of this forEach loop?
          // Request is async...
          $scope.albumsList.forEach(function (obj, i) {
              $scope.getAlbum(user, obj.id, function(value){
                  $scope.albums.push(value);
              });
          });
      };
  )]};
  </code></pre>
  
  <p><strong>Service:</strong></p>
  
  <pre><code>.factory('Imgur', function($resource) {
      return {
          album : $resource('https://api.imgur.com/3/account/:user/album/:id')
      }
  });
  </code></pre>