AngularJS Form Validation - formName.$valid is always true
<p>I have a simple form where the fields are dynamically generated through a directive called <code>field</code>. When I hit submit, the fields are validated and generate a valid class name such as <code>ng-invalid</code>, <code>ng-invalid-email</code>. But the class name of the form is always <code>ng-valid</code>. Any help would be much appreciated!</p>

<p><a href="http://plnkr.co/edit/Hw4A5EiyabO8UcvBg2Gi?p=preview" rel="nofollow">Plnkr</a></p>

<p><strong>HTML</strong></p>

<pre><code>&lt;body ng-controller="app_controller"&gt;
    &lt;form name="register" ng-submit="register_user()" novalidate&gt;
      &lt;table&gt;
        &lt;tr&gt;
          &lt;td&gt;Username: &lt;/td&gt;
          &lt;td&gt;&lt;field name="username" value="info"&gt;&lt;/field&gt;&lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
          &lt;td&gt;Email: &lt;/td&gt;
          &lt;td&gt;&lt;field name="email" value="info"&gt;&lt;/field&gt;&lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
          &lt;td&gt;&lt;/td&gt;
          &lt;td&gt;&lt;input type="submit" value="submit" ng-disabled="register.$invalid" /&gt;&lt;/td&gt;
        &lt;/tr&gt;
      &lt;/table&gt;

      Invalid: {{ register.$invalid }} &lt;br /&gt;
      valid: {{ register.$valid }}
    &lt;/form&gt;
</code></pre>

<p><strong>JS</strong></p>

<pre><code>var app = angular.module('app', []);

app.controller('app_controller', function($rootScope, $scope) {
  $scope.info = {
    username: '',
    email: ''
  };

  $rootScope.meta = {
    "username": {
      type: "STRING",
      length: 255
    },
    "email": {
      type: "EMAIL",
      length: 255
    }
  };
});

app.directive('field', function($rootScope, $compile) {
  return {
    restrict: 'E',
    scope: {
      value: '='
    },
    link: function($scope, $element, $attrs) {
      $scope.field_name = $attrs.name;
      $scope.required = true;
      console.log($scope);
      var prepare_fields = function() {
        if ($rootScope.meta) {
          $scope.field = angular.copy($rootScope.meta[$attrs.name]);
        }

        var html = '';
        if ($scope.field.type === "STRING") {
          html = '&lt;input type="text" name="' +$scope.field_name+ '" ng-model="value[field_name]" ng-required="required" /&gt;';
        } else if ($scope.field.type === "EMAIL") {
          html = '&lt;input type="email" name="' +$scope.field_name+ '" ng-model="value[field_name]" ng-required="required" /&gt;';
        }

        $element.html($compile(html)($scope));
      };

      $rootScope.$watch('meta', prepare_fields);
    }
  }
});
</code></pre>