title: ng repeat with custom directive
body: <p>I am trying to read properties set on an element by <code>ng-repeat</code> using another custom element:</p>
  
  <pre><code>&lt;div foo ng-repeat="img in [{image: 'images/img1.jpg', text: 'some text'},{image: 'images/img2.jpg', text: 'some text'}]"&gt;
      &lt;img ng-src="{{img.image}}"/&gt;
      &lt;p&gt;{{img.text}}&lt;/p&gt;
  &lt;/div&gt;
  
  app.directive('foo',function() {
    return {
      restrict : 'A',
      scope: {},
      link:function (scope, element, attrs) {
        var imageNode = element.find('img');
        var textNode = element.find('p');
  
        var image = {
          url: imageNode.prop('src'),
          text: textNode.html()
        };
  
        console.log(image);
      }
    };
  });
  </code></pre>
  
  <p>Since the <code>ng-repeat</code> runs before the custom directive, the DOM should be inserted with the 2 elements by the time the link function of 'foo' kicks in. In such case, the link function of 'foo' should fire twice with element as the inserted DOM by ng-repeat.</p>
  
  <p>The problem is that <code>imageNode.prop('src');</code> has the value "{{img.image}}" and not the evaluation of the expression.</p>
  
  <p>Can anyone help me understand what exactly is happening under the hood.</p>
  
  <p>Plunker example - <a href="https://plnkr.co/edit/E9JHhZUf2h7B6FVeXRK4?p=preview" rel="nofollow">https://plnkr.co/edit/E9JHhZUf2h7B6FVeXRK4?p=preview</a></p>
  
  <p><strong>EDIIT</strong></p>
  
  <p>The example above is trivial but what i wanted to understand is the flow of the directive execution. There are ways of getting the data to the foo directive but that's not the final objective.</p>
  
  <p>According to my understanding, since ng-repeat and foo are defined on the same element, the execution order will be<br>
  1) compile of ng-repeat because ng-repear has a priority of 1000<br>
  2) compile of foo since foo has a default priority of 0<br>
  3) link of foo since link executes in reverse priority order<br>
  4) link of ng-repeat  </p>
  
  <p>since ng-repeat uses transclude, it sucks out the DOM during the compile phase and is added again during its link phase.</p>
  
  <p>If that is the case, the link function of foo that is executing before link of ng-repeat should have nothing but the comment inserted by transclude as its element as the DOM is not yet added. 
  But that's not the case. I can access the two newly added DOM elements added by ng-repeat in foo's link phase. What am i missing?</p>
  
  <p>Also, if i am not wrong, the expressions are evaluated during the link phase, so if the new elements are reinserted by ng-repeat which happens during link phase, the expressions should have also been evaluated and the <strong>{{img.text}}</strong> should have been converted to <strong>"some text"</strong> during the link phase of ng-repeat which is not happening but when i do element[0] that is i can see the value {{image.text}} being replaced.
  Am i again missing something?</p>