title: Angular directive from array element in ngRepeat
body: <p>I am working on a project that will have any number of HTML cards, and the format and positioning of the cards is the same, but the content of them will differ.</p>
  
  <p>My plan was to implement the content of each card as an angular directive, and then using ngRepeat, loop through my array of directives which can be in any order, displaying each directive in a card. It would be something like this:</p>
  
  <p>inside my controller:</p>
  
  <pre><code>$scope.cards = [
      'directice-one',
      'directive-two',
      //etc..
  ]
  </code></pre>
  
  <p>my directive:</p>
  
  <pre><code>.directive('directiveOne', function () {
      return {
          restrict: "C",
          template: '&lt;h1&gt;One!!&lt;/h1&gt;'
      };
  })
  
  .directive('directiveTwo', function () {
      return {
          restrict: "C",
          template: '&lt;h1&gt;Two!!&lt;/h1&gt;'
      };
  })
  
  //etc..
  </code></pre>
  
  <p>my html:</p>
  
  <pre><code>&lt;div class="card" ng-repeat="item in cards"&gt;
      &lt;div class="{{item}}"&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>But.. the directives don't render. So I just get a div with <code>class="directive-one"</code>.</p>
  
  <p>This might be a design flaw on my part, some sort of syntax error, or just a limitation of angular. I'm not sure.</p>
  
  <p>I've also considered making a directive <code>&lt;card&gt;</code>, and then passing the <code>templateUrl:</code> into it, but that would cause me to lose my access to <code>$scope</code> and the javsacript capabilities that I would have if each card was it's own directive.</p>
  
  <p>So, advise, code help, anything would be very helpful!</p>