angularjs-directive - html5 テンプレートでカスタム angularjs ディレクティブを使用する方法

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」は入力要素に置き換えられません。