Angular指令$ compile html不会触发角度方法

Question

我有以下指令，我试图附加一些HTML

angular.module('Form').directive('remoteFieldValidation', function (Query, $q, $compile) {
    return {
        restrict: 'A',
        require: 'ngModel',
        link: function (scope, element, attr, ngModelCtrl) {
           var el = angular.element('<span/>');
           var errorMessageHTML = "<span ng-show='newUserForm.email.$error.myRemoteValidator' translate='FORMS.WRONG_USERNAME'></span>";
           el.append(errorMessageHTML);
           element.parent().append(el);
           $compile(element.contents())(scope);

        }
    }
});

附加了HTML，但ng-show和translate似乎都不起作用。谁能看到我做错了什么？

我的HTML是：

<div class="form-group" >
    <label class="control-label" for="email" translate="FORMS.EMAIL"></label>
    <input type="email" placeholder="{{ 'FORMS.EMAIL_PLACEHOLDER' | translate }}" class="form-control"
           ng-model="CTRL.user.username" id="email" required remote-field-validation="username" name="email">
</div>

从下图中可以看出，HTML已添加，但属性不起作用：