Angular only loads first directive

Question

I have declared two directives by the following design pattern:

var sampleDrtv = function () {
    return {
        restrict: 'E',
        replace: true,
        scope: false,
        templateUrl: 'app/views/partials/sample.html',
        link: function() {
            alert('sample');
        }
    }
};

angular
.module('app')
.directive('sampleDrtv', sampleDrtv);

If I add two directives following this pattern, only the first one gets loaded. Can someone explain me why?

Code Snippet: http://codepen.io/anon/pen/doYKap

Answer 1

Your tags are not properly closed. As the result Angular can't parse directives correctly. Fixed HTML would be:

<div ng-app="ativ">
    <ativ-history-list></ativ-history-list>
    <ativ-history-detail></ativ-history-detail>
</div>

Note, that custom elements require closing tags, they are not self-closing.

Demo: http://codepen.io/anon/pen/JdYZqG

Answer 2

While creating directives as elements close them properly. They are not self closing.

<div ng-app="ativ">
    <ativ-history-list></ativ-history-list>
    <ativ-history-detail></ativ-history-detail>
</div>