How to use custom angularjs directive in a html5 template

Question

I created a html5 template, and a custom angularjs directive. I want to use this directive in the h5 template. But the directive not works. My code like this,

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>

the directive is like this,

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

    }

}]);

this directive not works, "my-custom-directive" is not replaced by the input element when I run this code.