Directive that adds validation directive erasing data from textbox on $invalid

Question

This answer got me the closest to implementing this correctly but as soon as my field sets the $invalid key on the form (at least I think that's what it is) it erases the text inside my text box

here's my plnk

Answer 1

In order to work your directive, you need to add priority:1000 so that will get executes the code before any directive gets executed & other thing before compiling the DOM you need to remove directive attribute meta-validate so that it will not execute while compiling. If you don't do that then you will get Maximum Call stack exceeds. error.

Directive

 myApp.directive('metaValidate', function ($compile) {
    return {
      restrict: 'A',
      priority: 1000, //this setting is important to make sure it executes before other directives
      compile: function compile(element, attrs) {
        return {
          pre: function preLink(scope, iElement, iAttrs, controller) { if(!element.attr('ng-maxlength')){
              element.attr('ng-maxlength', '2');
              element.removeAttr("meta-validate");
            } },
          post: function postLink(scope, iElement, iAttrs, controller) {  
            $compile(element)(scope);
          }
        };
      }
    };
  });

Working Plunkr

Hope this could help you. Thanks.