title: Compile custom directives
body: <p>I'm trying to add dynamically a custom validation directive inside other custom directive. It works fine for system angular directive like "required", but not work for custom validate directive. </p>
  
  <p>I have directive 'controlInput' with input, on which i dynamically add directive 'testValidation' (in real application in dependance from data of control-input). </p>
  
  <pre><code>&lt;control-input control-data='var1'&gt;&lt;/control-input&gt;
  </code></pre>
  
  <p>Directives:</p>
  
  <pre><code>app.directive('controlInput', function ($compile) {
    return {
      restrict: 'E',
      replace: true,
      template: '&lt;div&gt;&lt;input type="text" ng-model="var1"&gt;&lt;/div&gt;',
      link: function (scope, elem, attrs) {
  
        var input = elem.find('input');
        input.attr('required', true);
        input.attr('test-validation', true);
        $compile(elem.contents())(scope);
      }
    };
  });
  app.directive('testValidation', function () {
    return {
      restrict: 'A',
      require: 'ngModel',
      link: function (scope, element, attrs, ctrl) {
        ctrl.$parsers.unshift(function (value) {
          if (value) {
            var valid = value.match(/^test$/);
            ctrl.$setValidity('invalidTest', valid);
          }
          return valid ? value : undefined;
        });
      }
    };
  });
  </code></pre>
  
  <p>Full example <a href="http://plnkr.co/edit/FylMfTugHrotEMSQyTfT?p=preview" rel="nofollow">http://plnkr.co/edit/FylMfTugHrotEMSQyTfT?p=preview</a></p>
  
  <p>In this example I also add simple input to be sure 'testValidation' directive is working.</p>
  
  <p>Thanks for any answers!</p>