title: How do I ensure a directive's link function runs before a controller?
body: <p>In our application we have a view being loaded via a simple route.</p>
  
  <pre><code>$routeProvider
      .when('/', {
          template: require('./views/main.tpl.html'),
          controller: 'mainCtrl'
      })
      .otherwise({
          redirectTo: '/'
      });
  </code></pre>
  
  <p>This associates the <code>mainCtrl</code> controller with the view. The view looks like this:</p>
  
  <pre><code>&lt;left-rail&gt;
      &lt;filter-sub-rail
          id="filter-rail"
          show-all-filter="isAdmin"
          components="components"&gt;
      &lt;/filter-sub-rail&gt;
  &lt;/left-rail&gt;
  
  &lt;div class="endor-Page-content endor-Panel"&gt;
      &lt;action-bar
          selected-components="selectedComponents"
          toggleable-columns="toggleableColumns"
          refresh-component-list="refreshComponentList()"&gt;
      &lt;/action-bar&gt;
      &lt;filter-pills&gt;&lt;/filter-pills&gt;
      &lt;div class="js-endor-content endor-Panel-content endor-Panel-content--actionBarHeight"&gt;
          &lt;component-table
              components="components"
              selected-components="selectedComponents"
              toggleable-columns="toggleableColumns"&gt;
          &lt;/component-table&gt;
      &lt;/div&gt;
      &lt;spinner id="cmSpinner" large="true" center="true"&gt;&lt;/spinner&gt;
      &lt;modal&gt;&lt;/modal&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>The third to last line contains a <code>&lt;spinner&gt;</code> directive. This directive creates a spinner graphic while data is being loaded. It has an associated Angular service called <code>spinnerApi</code>. The spinner directive registers the spinner with the spinner API, allowing other services to inject the spinner API and call <code>show</code> and <code>hide</code> methods, passing in an ID, to show/hide the desired spinner.</p>
  
  <p>In <code>mainCtrl</code> there is a function that begins loading some data the minute the controller runs.</p>
  
  <pre><code>//spinnerApi.show('spinner1');
  var data = Segment.query({
      /*...truncated for brevity...*/
  }, function () {
      $scope.components = data;
      spinnerApi.hide('spinner1');
  });
  </code></pre>
  
  <p>You can see the first call to <code>spinnerApi.show</code> is commented out. That's because at this point the spinner directive has not had its link function run and the spinner is not yet registered with the API. If I uncomment that line I get an exception because there is no spinner called spinner1 yet. However, by the time the callback runs from the query the spinner is available and the call succeeds.</p>
  
  <p>How can I make sure that the spinner directive runs and registers the spinner with the API <em>before</em> I begin loading data in the controller and avoid this race condition?</p>