Multiple AngularJS directives in HTML. Only one appears

Question

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

The following code works in this demo and you see a list of all 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> 

On my page, the following code does not work. Only the first card appears. Ace.

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

But the following code works. Both cards appear. Why is this?

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

For complete code check out the repo. But the directive is below if that 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

It turned 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> 

It works.

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

This does not work.