Angular.js custom directive not showing up multiple times

Question

I've got a Angular.js directive I'm writing to reduce some boilerplate with Twitter Bootstrap. So far I've created a form-input element and it displays as expected. However, if I place many of these directives in the same parent element, only the first one actually gets added and shows up.

Can anyone shed some light on why?

My markup:

<form class="form-horizontal" role="form">
        <form-input type="text" target="name1" label="Name1" placeholder="Doug" ng-model="name1"/>
        <form-input type="text" target="name2" label="Name2" placeholder="Frank" ng-model="name2"/>
    </form>

app.js

var app = angular.module('app', ['ui.router']);


app.controller('FormInputController', ['$scope', '$attrs', function($scope, $attrs){
    console.log("Controller");
}]);

app.directive('formInput', function(){
    return {
        restrict: 'E',
        controller: 'FormInputController',
        transclude: true,
        replace: true,
        require: ['^ngModel'],
        template: '<div class="form-group">'
                + '<label for="{{id}}" class="col-sm-2 control-label">{{label}}</label>'
                + '<div class="col-sm-10">'
                  + '<input type="{{type}}" class="form-control" id="{{id}}" placeholder="{{placeholder}}">'
                + '</div>'
              + '</div>',
        scope: {
            id: '@',
            label: '@',
            placeholder: '@',
            type: "@"
        },

        link: function(scope, element, attrs, ctrls) {
            console.log(arguments);
        }
    };
});

As stated above, only the "Doug" input shows up.

Answer 1

You can't use "self closing" tags for your directives. If you change your markup as follows it should work:

<form class="form-horizontal" role="form">
    <form-input type="text" target="name1" label="Name1" placeholder="Doug" ng-model="name1"></form-input>
    <form-input type="text" target="name2" label="Name2" placeholder="Frank" ng-model="name2"></form-input>
</form>

Basically, the way that HTML parses <form-input /> is as an open tag without a close tag, so your first directive is started, but never finished, which is why the first one appears to work, but the second one not.

See eg this and this for more details.