title: AngularJS calling a function once I've made an array
body: <p><strong>Background</strong></p>
  
  <p>I am making a angularJS app</p>
  
  <p>I have an object called a Map. The Map has an array of Transforms IDs.</p>
  
  <p>I need to fetch each transform in the Maps's array, then save these to an array of Transforms instead of an array of Transform IDs. So far, I have this done, except calling the function at the correct time.</p>
  
  <p>I want to call a function: <code>doStuffWithTransformArray</code> using the completed array.</p>
  
  <p><strong>Question</strong></p>
  
  <p>How do I call a function only when the array is finished being filled?</p>
  
  <p><strong>Current Code (this only works sometimes)</strong></p>
  
  <pre><code>    $scope.makeTransformArray = function () {
          $scope.transforms = [];
          $scope.map.transforms.forEach(function(eachTransformID, index) {
              Transform.get({uuid: eachTransformID.uuid}, function(transformResult) {
                  $scope.transforms[index] = transformResult;
                  if ($scope.transforms.length == $scope.map.transforms.length) {
                      $scope.doStuffWithTransformArray($scope.transforms);
                      return;
                  }
              });
          });
      }
  </code></pre>
  
  <p><strong>Problem</strong></p>
  
  <p>This current code will work only when the last Transform in the Map's array finishes last.</p>
  
  <p>It will call the <code>doStuffWithTransformArray</code> twice if when the array is filled like this: <code>(5) [y, y, y, empty, y]</code> </p>
  
  <p>The fourth one is not yet filled but the fifth finished.</p>
  
  <p><strong>EDIT 1</strong></p>
  
  <p>Here is my transform Service:</p>
  
  <pre><code>angular.module('serviceregistryApp')
  .factory('Transform', function ($resource) {
      var url = 'api/v1/transform/:uuid';
      return $resource(url, {transform: '@transform',  uuid: '@uuid'}, {
          'save': {method: 'POST', headers: {"Authorization": "ABC"}},
          'delete': {method: 'DELETE', headers: {"Authorization": "ABC"}},
          'post': {method: 'POST', headers: {"Authorization": "ABC"}},
          'get': {
              method: 'GET', isArray: false, 
              headers: {
                  "Authorization": "ABC"
              }, url: "api/v1/transform/:uuid",
              transformResponse: function (data) {
                  return JSON.parse(data);
              }
          }
      });
  });
  </code></pre>
  
  <p><strong>EDIT 2</strong></p>
  
  <p>As suggested in the comments, this seems to work, but I find it kinda ugly.</p>
  
  <pre><code>    $scope.makeTransformArray = function () {
          $scope.transforms = [];
          var counter = 0;
          $scope.map.transforms.forEach(function(eachTransformID, index) {
              Transform.get({uuid: eachTransformID.uuid}, function(transformResult) {
                  $scope.transforms[index] = transformResult;
                  counter = counter + 1;
                  if (counter == $scope.map.transforms.length) {
                      $scope.doStuffWithTransformArray($scope.transforms);
                      return;
                  }
              });
          });
      }
  </code></pre>