title: Best aproach when dealing with mutliple promisses
body: <p>I was looking on the internet but did not see a definitive answer. So here is my case:</p>
  
  <p>The code is written by head so excuse for not being complete
  I have a page that looks something like:</p>
  
  <pre><code>&lt;div ng-controller="myController"&gt;
      &lt;my-customer my-callback="directiveCallback(item)" /&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I then have a script that looks like this:</p>
  
  <pre><code>var app = angular.module('myApp', []);
  app.controller('myController', ['$scope', 'apiService', function($scope, apiService) {
  
      apiResponse = apiService.getAll('myRepo');
  
      apiResponse.then(function(d){
       $scope.data = d;   
      })
  
      $scope.directiveCallback = function(item) {
  
          // do stuff with $scope.data
      }
  
    }])
    .directive('myCustomer', function() {
      return {
          scope: {
              myCallback:'&amp;'
          },
        template: 'Name: {{customer.name}} Address: {{customer.address}}'
      };
    });
  </code></pre>
  
  <p>The thing is the service promise resolves and returns some data.
  The directive controller is calling another service that returns some data and fires the call back when it is done with the data that it recives.</p>
  
  <p>When he lands on the callback function the item is attached to the $scope.data.</p>
  
  <p>The problem was that the callback is triggered before $scope.data is populated.
  I curently salved this so that I wraped the callback in a $timeout with a settable delay via a direcitve parameter.</p>
  
  <p>Is that is correct way to do it or is there a better way?</p>