Пользовательская директива AngularJs не отображается после использования $ compile

Question

Я пытаюсь заставить проверку формы angularjs работать с диапазоном, который добавляется в директиву, когда требуется проверка. FormName и имя элемента формы динамически создаются и преобразуются в строку проверки с интерполяцией строк.

export class AbiFormBuilderDirective implements ng.IDirective {
    public static $inject = [];
    public restrict = "E";

    templateUrl = $("#DirectiveTemplateUrls").data("abiformbuilder");

    constructor(private $compile: ng.ICompileService) { }

    public scope = {
        option: "=",
        name: "=",
        formName: "="
    }

    public link = (scope: IAbiFormBuilderDirectiveScope, element: ng.IAugmentedJQuery, attrs) => {
        scope.uniqueName = `option_${scope.option.id}`;
        const content = `<span class="text-danger" ng-if="${scope.formName}.${scope.uniqueName}.$error.required">error</span>`;
        this.$compile(element.append(content))(scope);
    }

    public static factory(): ng.IDirectiveFactory {
        const directive = ($compile) => {
            return new AbiFormBuilderDirective($compile);
        };
        directive.$inject = ["$compile"];
        return directive;
    }
}

Мой взгляд выглядит следующим образом:

<input type="text" id="{{uniqueName}}" name="{{uniqueName}}" ng-model="value" class="form-control" placeholder="{{option.name}}" required />

Я хочу добитьсядинамическое управление формой, которое добавляет диапазон ошибок, как только требуется ввод. Когда я отлаживаю, я вижу входной рендеринг с его диапазоном, но затем он исчезает. Если я удаляю $ compile, то вижу элемент управления, но моя проверка всегда видна.

Может ли кто-нибудь направить меня в правильном направлении?