title: Using a directive inside an ng-repeat, and a mysterious power of scope '@'
body: <p>If you prefer to see the question in working code, start here: <a href="http://jsbin.com/ayigub/2/edit" rel="nofollow noreferrer">http://jsbin.com/ayigub/2/edit</a></p>
  
  <p>Consider this almost equivalent ways to write a simple direcive:</p>
  
  <pre><code>app.directive("drinkShortcut", function() {
    return {
      scope: { flavor: '@'},
      template: '&lt;div&gt;{{flavor}}&lt;/div&gt;'
    };
  });
  
  app.directive("drinkLonghand", function() {
    return {
      scope: {},
      template: '&lt;div&gt;{{flavor}}&lt;/div&gt;',
      link: function(scope, element, attrs) {
        scope.flavor = attrs.flavor;
      }
    };
  });
  </code></pre>
  
  <p>When used by themselves, the two directives work and behave identically:</p>
  
  <pre><code>  &lt;!-- This works --&gt;
    &lt;div drink-shortcut flavor="blueberry"&gt;&lt;/div&gt;
    &lt;hr/&gt;
  
    &lt;!-- This works --&gt;
    &lt;div drink-longhand flavor="strawberry"&gt;&lt;/div&gt;
    &lt;hr/&gt;
  </code></pre>
  
  <p>However, when used within an ng-repeat, only the shortcut version works:</p>
  
  <pre><code>  &lt;!-- Using the shortcut inside a repeat also works --&gt;
    &lt;div ng-repeat="flav in ['cherry', 'grape']"&gt;
      &lt;div drink-shortcut flavor="{{flav}}"&gt;&lt;/div&gt;
    &lt;/div&gt;
    &lt;hr/&gt;
  
    &lt;!-- HOWEVER: using the longhand inside a repeat DOESN'T WORK --&gt;      
    &lt;div ng-repeat="flav in ['cherry', 'grape']"&gt;
      &lt;div drink-longhand flavor="{{flav}}"&gt;&lt;/div&gt;
    &lt;/div&gt;
  </code></pre>
  
  <p>My questions are:</p>
  
  <ol>
  <li>Why does the longhand version not work inside an ng-repeat?</li>
  <li>How could you make the longhand version work inside an ng-repeat?</li>
  </ol>