AngularJS multiple directives in HTML. Only one shows up

Question

Working with this repo: https://github.com/nkcraddock/angular-playing-cards

In that demo, the following code works and you see a list of all of the cards.

<div ng-controller="DemoCtrl" style="font-size: 0.45em;">
    <playing-card suit="{{card.suit}}" rank="{{card.rank}}" ng-repeat="card in Cards"/>
</div>

In my page, the following code does not work. Only the first card shows up. The ace.

<div>
  <playing-card rank="ace" suit="spade" />
  <playing-card rank="king" suit="spade" />
</div>

But the following code DOES work. Both cards show up. Why is this?

<div>
  <playing-card rank="ace" suit="spade" />
</div>
<div>
  <playing-card rank="king" suit="spade" />
</div>
<div>

For the full code, check the repo. But the directive is below in case it helps.

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));
    }
};

Answer 1

Figured it out... You have to close the directive element.

<div>
  <playing-card rank="ace" suit="spade"></playing-card>
  <playing-card rank="king" suit="spade"></playing-card>
</div>

That works.

<div>
  <playing-card rank="ace" suit="spade" />
  <playing-card rank="king" suit="spade" />
</div>

That doesn't work.