Шаблон AngularJs с условным атрибутом

Question

Задача: создать шаблон с условными атрибутами, который изменяется в зависимости от значения модели.

Проблема: Когда я устанавливаю шаблон с помощью директивы, его атрибуты устанавливаются один раз и больше не изменяются.

Вот мой код:

Derective:

loginApp.directive('validationIcon', ['$compile', function ($compile) {
    return {
        restrict: 'E',
        scope: {
            validatedField: '=',
        },
        template: '<ng-include src="contentUrl"/>',
        link: function (scope, element, attrs) {
            scope.$watch("validatedField.$touched", function () {
                if (scope.validatedField.$touched) {
                    scope.$applyAsync(function () {
                        scope.contentUrl = '../../pages/templates/validation-icon-tplt.html';
                    });
                }
            });
        },
        replace: true
    };
}]);

шаблон:

<i ng-class="{'fa fa-lg fa-times-circle': {{validatedField.$invalid}}, 'fa fa-lg fa-check-circle' : {{validatedField.$valid}} }" 
   ng-style="{{validatedField.$invalid}} ?{color: 'red'}: {color: 'green'}"/>

element:
        <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" name="userName" ng-model="userName" required autofocus/>
            <span class="input-group-addon"><validation-icon validated-field=regForm.userName></validation-icon>
            </span>
        </div>

Может кто-нибудь подскажет, что я делаю не так?