title: AngularJS Dynamic Directives inside ng-repeat
body: <p>I'm trying to create directives dynamically inside an ng-repeat.  I have a <code>directive-writer</code> that creates a number of other directives but the <code>directive-writer</code> doesn't seem to output the directive attributes.  So the second set of directives are never rendered.</p>
  
  <p>See <a href="http://plnkr.co/edit/oISTFHfcsMXZWCxbdSxo" rel="nofollow">this Plunker</a> for a full demo.</p>
  
  <p>In  short I have this directive tag:</p>
  
  <pre><code>&lt;div ng-repeat="dir in directives" directive-writer 
       directive-text="{{ dir.text }}" directive-type="{{ dir.directive }}"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>Scope data:</p>
  
  <pre><code>$scope.directives = [
      { directive: 'one', text: 'I am One' },
      { directive: 'two', text: 'I am Two' },
      { directive: 'three', text: 'I am Three' }
  ];
  </code></pre>
  
  <p>Directive definition:</p>
  
  <pre><code>.directive('directiveWriter', function() {
      return {
          restrict: 'A',
          compile: function(tElement, tAttrs) {
  
              tElement.html('&lt;div say="' + tAttrs.directiveText + '" '
                   + tAttrs.directiveType + '&gt;' + tAttrs.directiveType + '&lt;/div&gt;');
          }
      };
  </code></pre>
  
  <p>And 3 more directives all like this one:</p>
  
  <pre><code>.directive('one', function() {
      return {
          restrict: 'A',
          replace: true,
          template: '&lt;h3 class="one"&gt;&lt;/h3&gt;',
          compile: function(tElement, tAttrs) {
              tElement.text('One says, ' + tAttrs.say);
          }
      };
  </code></pre>
  
  <p>The problem is the <code>directiveWriter</code> doesn't write out the <code>tAttrs.directiveType</code> value as an attribute only as text...</p>
  
  <p>So the rendered HTML is:</p>
  
  <pre><code>&lt;div say="I am One" {{ dir.directive }} class="ng-binding"&gt;one&lt;/div&gt;
  </code></pre>
  
  <p>Where "three" is rendered inside the div as text no problem but is never rendered as an attribute.</p>
  
  <p>I don't understand:</p>
  
  <ul>
  <li>Why the text "three" can be bound inside the div as text but not as an attribute.</li>
  <li>Why the class is set to "ng-binding".</li>
  </ul>