How to add validation attributes in an angularjs directive

Question

I am trying to write an angular directive that adds validation attributes to the tag, but it doesn\'t seem to be working. Here is my demo. You will notice that \"Is Valid\

Answer 1

Be careful of infinite loops and recompiles, a better solution is here: Add directives from directive in AngularJS

angular.module('app')
  .directive('commonThings', function ($compile) {
    return {
      restrict: 'A',
      terminal: true, //this setting is important to stop loop
      priority: 1000, //this setting is important to make sure it executes before other directives
      compile: function compile(element, attrs) {
        element.attr('tooltip', '{{dt()}}');
        element.attr('tooltip-placement', 'bottom');
        element.removeAttr("common-things"); //remove the attribute to avoid indefinite loop
        element.removeAttr("data-common-things"); //also remove the same attribute with data- prefix in case users specify data-common-things in the html

        return {
          pre: function preLink(scope, iElement, iAttrs, controller) {  },
          post: function postLink(scope, iElement, iAttrs, controller) {  
            $compile(iElement)(scope);
          }
        };
      }
    };
  });

Working plunker is available at: http://plnkr.co/edit/Q13bUt?p=preview