title: dynamically adding directives in ng-repeat
body: <p>I am trying to dynamically add different directives in an ng-repeat however the output is not being interpreted as directives.</p>
  
  <p>I've added a simple example here: <a href="http://plnkr.co/edit/6pREpoqvmcnJJWzhZZKq" rel="noreferrer">http://plnkr.co/edit/6pREpoqvmcnJJWzhZZKq</a></p>
  
  <p>Controller:</p>
  
  <pre><code>$scope.colors = [{name:"red"}, {name: "blue"}, {name:"yellow"}]; 
  </code></pre>
  
  <p>Directive:</p>
  
  <pre><code>app.directive("red", function () {
      return {
          restrict: 'C',
          template: "RED directive"
      }
  });
  </code></pre>
  
  <p>Html:</p>
  
  <pre><code>&lt;ul&gt;
    &lt;li ng-repeat="color in colors"&gt;
      &lt;span class="{{color.name}}"&gt;&lt;/span&gt;
    &lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>How do I make angular pick up the directive specified in the <code>class</code> that is output via ng-repeat?</p>