title: Wait for data in controller before link function is run in AngularJS directive
body: <p>How can I ensure that data from a controller has been loaded in a directive before the link function is run?</p>
  
  <p>Using psuedo-code, I could have:</p>
  
  <pre><code>&lt;my-map id="map-canvas" class="map-canvas"&gt;&lt;/my-map&gt;
  </code></pre>
  
  <p>for my html.</p>
  
  <p>In my directive I might have something like this:</p>
  
  <pre><code>app.directive('myMap', [function() {
  
  
  
  return{
      restrict: 'AE',
      template: '&lt;div&gt;&lt;/div&gt;',
      replace: true,
      controller: function ($scope, PathService) {
  
          $scope.paths = [];
  
          PathService.getPaths().then(function(data){
              $scope.paths = data;
  
          });
  
      },
      link: function(scope, element, attrs){
          console.log($scope.paths.length);
  
      }
  
  }
  
  
  }]);
  </code></pre>
  
  <p>The above won't work because console.log($scope.paths.length); will get called before the service has returned any data.</p>
  
  <p>I know I can call the service from the link function but would like to know if there is a way to "wait" for the service call before firing the link function.</p>