angularjs – 表单验证和添加了$compile的字段

我有一个全局表单,在表单内部,动态字段使用指令呈现.基于我的字段类型的这个指令将最近编译的指令附加到末日.

这里是指令：

app.directive('render',function($compile){
    return {
        scope: {model: '='},restrict: 'A',replace: true,template:
      '<div class="product-option-selector">'+
      '</div>',link: function(scope,element){
      var directive = null;

        switch(scope.model.type){
        case 'number':
          directive =
              '<div data-item-number data-model="model"></div>';
          break;
        case 'text':
          var directive =
              '<div data-item data-model="model"></div>';
          break;
        case 'radio':
          var directive =
              '<div fg-product-option-selector-radio option="option" item="item" index="index"></div>';
          break;
      }
      if(!directive) return;

      directive = '<div>'+directive+'</div>';
      $(element).append($compile(directive)(scope));
    }
    }
});

app.directive('item',function(){
    return {
        scope: {model: '='},template: 
            '<ng-form name="innerForm">'+
            '{{model.name}}'+
             '<input type="text" name="innerVal" ng-model="model.value" required></input>'+
        '</ng-form>'
    }
});

app.directive('itemNumber',template: 
            '<ng-form name="innerForm">'+
            '{{model.name}}'+
             '<input type="number" name="innerVal" ng-model="model.value" required></input>'+
        '</ng-form>'
    }
});

表单无效时,我必须禁用表单中的按钮.问题是该按钮从不被禁用.

html代码：

<div ng-controller="basicController">
<form name="form">
    <div ng-repeat="f in fields">
        <div data-render data-model="f"></div>
    </div>
    <button ng-disabled="form.$invalid">submit</button>
</form>
</div>

我的主要链接：http://jsfiddle.net/8rz6U/1/

这是我在应用程序中的问题的简化.字段指令更复杂,但代码在这里.

谢谢,