Dom Elements Not Getting Updated From Angular Controller

I'm trying to run a function on ng-blur which will validate the user input against regular expression defined for that field. What I want to achieve is if the regular expression d

Solution 1:

First of all no need to use $apply inside $timeout, as it internally use it. Best practice, Dom Manipulations should not exist in controllers, services or anywhere else but in directives.

.directive('fieldvalidate', [
  function() {
    return {
      restrict: 'A',
      link: function($scope, $element, $attributes) {
        $element[0].onblur = function() {
          //check against regex
          if(){//if failed
            $element[0].style.borderColor='red';
            $element[0].insertAdjacentHTML('afterend', '<div>your message</div>');
          }
        }
      }
    };
  }
]);