title: AngularJS multiple directives in HTML. Only one shows up
body: <p>Working with this repo: <a href="https://github.com/nkcraddock/angular-playing-cards" rel="noreferrer">https://github.com/nkcraddock/angular-playing-cards</a></p>
  
  <p>In that demo, the following code works and you see a list of all of the cards.</p>
  
  <pre><code>&lt;div ng-controller="DemoCtrl" style="font-size: 0.45em;"&gt;
      &lt;playing-card suit="{{card.suit}}" rank="{{card.rank}}" ng-repeat="card in Cards"/&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>In my page, the following code does not work. Only the first card shows up. The ace.</p>
  
  <pre><code>&lt;div&gt;
    &lt;playing-card rank="ace" suit="spade" /&gt;
    &lt;playing-card rank="king" suit="spade" /&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>But the following code DOES work. Both cards show up. Why is this?</p>
  
  <pre><code>&lt;div&gt;
    &lt;playing-card rank="ace" suit="spade" /&gt;
  &lt;/div&gt;
  &lt;div&gt;
    &lt;playing-card rank="king" suit="spade" /&gt;
  &lt;/div&gt;
  &lt;div&gt;
  </code></pre>
  
  <p>For the full code, check the repo. But the directive is below in case it helps.</p>
  
  <pre><code>return {
      scope: {
          rank: '=',
          suit: '='
      },
      restrict: 'E',
      // template: function(tElement, tAttrs) {
      //     return ranks[tAttrs.rank].template;
      // },
      link: function(scope, element, attrs) {
          scope.rank = ranks[attrs.rank] || ranks.back;
          scope.suit = suits[attrs.suit] || suits.heart;
          element.replaceWith($compile(scope.rank.template)(scope));
      }
  };
  </code></pre>