title: Custom directive in ng-repeat: Why does ng-style not apply?
body: <p>I have a custom directive <code>myItems</code> that is rendering a list of items using another directive <code>myItem</code> via <code>ng-repeat</code>:</p>
  
  <pre><code>app.directive('myItems', function() {
      return {
          scope:{items:"="},
          restrict:"E",
          template:"&lt;div my-item ng-repeat='item in items'&gt;&lt;/div&gt;"
      };
  });
  </code></pre>
  
  <p>Each item contains information (such as a color) that has be used for styling the elements.  This works fine so far if I use the templating approach:</p>
  
  <pre><code>app.directive('myItem', function() {
      return {
          restrict:"A",
          template:"&lt;div ng-style='{color:item.color}'&gt;myItem: {{item.name}}&lt;/div&gt;",
          replace:true
      };
  });
  </code></pre>
  
  <p>To support more involved features, I now want to rebuild the same functionality if <code>my-item</code> by manually creating all the needed stuff including the ng-style:</p>
  
  <pre><code>app.directive('myItem', function($compile) {
      return {
          restrict:"A",
          compile: function(element) {
              element.removeAttr('my-item');
              element.text('myItem: {{item.name}}');
              element.attr('ng-style', '{color:item.color}');    // Why does it have no effect?
  
              var compileElement = $compile(element);
              return function link(scope, elem, attr) {
                  compileElement(scope);    // Why does binding with {{item.name}} even work without this statement?
              };
          }
      };
  });
  </code></pre>
  
  <p>Interestingly enough databinding using <code>{{item.name}}</code> works while <code>ng-style</code> does not.</p>
  
  <p>Here is a <a href="https://jsfiddle.net/muL9k8dp/7/" rel="nofollow noreferrer">fiddle</a> showing both approaches described above.</p>
  
  <p>I am aware of the <a href="https://stackoverflow.com/q/15423955/571213">similar question</a>. But I think it does not apply here since I have no explicit statements about the scope of the <code>my-item</code> directive.</p>