Как использовать пользовательскую директиву angularjs в шаблоне html5

Question

Я создал шаблон html5 и пользовательскую директиву angularjs. Я хочу использовать эту директиву в шаблоне h5. Но директива не работает. Мой код такой,

HTML:

        <template id="templateId">
        <section class="col-sm-6">
            <div style='display: table; width: 100%;'>
                <div class="form-row ">
                    <div class="form-cell">
                        <label style="width: 150px;">Acronym</label> 
                        <my-custom-directive data-field="acronym"/>
                    </div>
                </div>
            </div>
        </section>
    </template>

директива такая,

myApp.directive('myCustomDirective', [function () {
return {
    restrict: 'EA',
    replace: true,
    transclude: true,
    template: '<input id="acronym" type="text" style="width: 200px;">',
    ...

    }

}]);

эта директива не работает, когда я запускаю этот код, "my-custom-directive" не заменяется элементом input.