title: Form Validation and fields added with $compile
body: <p>I have a question regarding form validation. It is not working for me in the following scenario:</p>
  
  <p>I have a global form, inside the form dynamic fields are rendered using a directive. That directive based on the type of my field appends a recently compiled directive to the doom.</p>
  
  <p>here is the directive:</p>
  
  <pre><code>app.directive('render', function($compile){
      return {
          scope: {model: '='},
          restrict: 'A',
          replace: true,
          template:
        '&lt;div class="product-option-selector"&gt;'+
        '&lt;/div&gt;',
      link: function(scope, element){
        var directive = null;
  
          switch(scope.model.type){
          case 'number':
            directive =
                '&lt;div data-item-number data-model="model"&gt;&lt;/div&gt;';
            break;
          case 'text':
            var directive =
                '&lt;div data-item data-model="model"&gt;&lt;/div&gt;';
            break;
          case 'radio':
            var directive =
                '&lt;div fg-product-option-selector-radio option="option" item="item" index="index"&gt;&lt;/div&gt;';
            break;
        }
        if(!directive) return;
  
        directive = '&lt;div&gt;'+directive+'&lt;/div&gt;';
        $(element).append($compile(directive)(scope));
      }
      }
  });
  
  app.directive('item', function(){
      return {
          scope: {model: '='},
          restrict: 'A',
          replace: true,
          template: 
              '&lt;ng-form name="innerForm"&gt;'+
              '{{model.name}}'+
               '&lt;input type="text" name="innerVal" ng-model="model.value" required&gt;&lt;/input&gt;'+
          '&lt;/ng-form&gt;'
      }
  });
  
  app.directive('itemNumber', function(){
      return {
          scope: {model: '='},
          restrict: 'A',
          replace: true,
          template: 
              '&lt;ng-form name="innerForm"&gt;'+
              '{{model.name}}'+
               '&lt;input type="number" name="innerVal" ng-model="model.value" required&gt;&lt;/input&gt;'+
          '&lt;/ng-form&gt;'
      }
  });
  </code></pre>
  
  <p>I have a button in the form that must be disabled when the form is invalid. The problem is that the button is never disabled.</p>
  
  <p>the html code:</p>
  
  <pre><code>&lt;div ng-controller="basicController"&gt;
  &lt;form name="form"&gt;
      &lt;div ng-repeat="f in fields"&gt;
          &lt;div data-render data-model="f"&gt;&lt;/div&gt;
      &lt;/div&gt;
      &lt;button ng-disabled="form.$invalid"&gt;submit&lt;/button&gt;
  &lt;/form&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>my jsFindle link: <a href="http://jsfiddle.net/8rz6U/1/">http://jsfiddle.net/8rz6U/1/</a></p>
  
  <p>This is a simplification of my problem in the app. the fields directives are more complex, but the code is here.</p>
  
  <p>Thank you,</p>