I want to change `innerHTML` of element depending on the result of a validation test. As a newbie to `angular.js`, I am not sure on how to achieve that. I tried to add custom `directive`, but it not works. I want to react on all validation tests for a particular element. Maybe, someone here can tell me best way to do that.

This is my (not-working) code:

**.js**

```
loginApp.directive('iconValidator', function() {
    return {
        require: 'ngModel',
        link: function (scope, elm, attrs, ctrl) {
            ctrl.$validators.iconValidator = function (modelValue, viewValue) {
                if (ctrl.$isEmpty(modelValue)) {
                    scope.iconHtml='';
                    return true;
                }
                if (ctrl.$touched && ctrl.$invalid {
                    debuger
                    scope.iconHtml='<i class="fa fa-times-circle fa-lg" style="color:red"></i>';
                    return false;
                }

                scope.iconHtml='';
                return true;
            };
        }
    };
});

```

**.html**

```
<div class="col-md-6">
    <div class="signup-form">
        <h2>New User Signup!</h2>
        <form action="#" novalidate method="post" name="regForm" ng-submit="submit()">
            <div class="input-group margin-bottom-sm">
                <input type="text" class="form-control" placeholder="Username" iconValidator ng-model="userName" required autofocus/>
                <span class="input-group-addon" ng-bind-html="iconHtml"></span>
            </div>
        </form>
    </div>
</div>

```

Also, I included the module `ngSanitize`.

Maybe someone can help me to put an icon in the `<span>` element as the `innerHTML`?