title: AngularJS change order of which directives are compiled
body: <p>As far as I've noticed Angular compiles things on a first come, first-serve basis which is kind of tricky. I made a directive which wraps some elements around and I want to have a link property which looks for stuff in the content. </p>
  
  <p>For a concrete use-case: I am making a input label directive which looks inside the content for the first input and adds a randomly generated <code>id</code> to the <code>input</code> and a <code>for</code> attribute to the <code>label</code></p>
  
  <p>Here's the code:</p>
  
  <pre><code>// Find the first element with the attribute ng-label-target or the first input and links a label to it
  app.directive('ngLabel', function () {
    return {
      restrict: 'E',
      replace: true,
      transclude: true,
      scope: {
        label: '@',
      },
      template: '&lt;span class="ng-label"&gt;' +
                  '&lt;label class="ng-label-text"&gt;{{label}}&lt;/label&gt;' +
                  '&lt;span class="ng-label-content" ng-transclude&gt;&lt;/span&gt;' +
                '&lt;/span&gt;',
      link: function (scope, element, attrs) {
        scope.id = scope.id || 'random-id-' + Math.floor(Math.random() * 90000000);
        angular.element(element[0].querySelector('.ng-label-text')).
          attr({for:scope.id});
  
        var target = angular.element(element[0].querySelector('[ng-label-target]'));
        if (!target || target.length == 0) {
          target = angular.element(element[0].querySelectorAll('input,select,textarea')[0]);
        }
        target.attr({id:scope.id});
      },
    };
  });
  </code></pre>
  
  <p>Example Usage:</p>
  
  <pre><code>&lt;ng-label label="Text:"&gt;
     &lt;input type="text" ng-model="page.textColor" size="5" maxlength="7" placeholder="e.g. #000" required /&gt;
     &lt;input ng-label-target type="color" ng-model="page.textColor" required /&gt;
  &lt;/ng-label&gt;
  </code></pre>
  
  <p>This by itself works like a charm.</p>
  
  <p>However now I want to auto-generate several inputs and have the label point to the first one. The issue is that when I do a <code>ng-repeat</code> inside my <code>ng-label</code> then <code>ng-repeat</code> code gets generated after my directive was processed so nothing actually gets found.</p>
  
  <p>Therefore my question is: is there a way in which you can specify to angular to evaluate nested directives inside out instead of the other-way around?</p>
  
  <p>Or, is there a batter way of doing this than I'm currently doing?</p>
  
  <p>I made a fiddle to exemplify the order in which stuff gets evaluated. You see that the outer-directive has a smaller or equal value than it's contents (can't go lower than microseconds so I had to do a bunch of repeats): </p>
  
  <p><a href="http://jsfiddle.net/YLM9P/">http://jsfiddle.net/YLM9P/</a></p>