title: Form input validation doesn't work in angular forms (with plunkr)
body: <p>EDIT: PLUNKR is updated and demonstrates the issue!</p>
  
  <p>I have a feeling my design is flawed, but I did the following:  (Simplified example of the issue:)</p>
  
  <pre><code>.directive('awesomeInput', function($log, $compile) {
      return {
          scope: {
              'ngModel': '='
          },
          link: function(scope, elem, attrs) {
              elem.prepend(angular.element('&lt;input type="text" ng-model="ngModel" name="awesome" required&gt;'));
             $compile(elem.contents())(scope);
          }
      };
  });
  </code></pre>
  
  <p>If I then use awesomeInput in a form, the issue I'm having is that the validators such as ng-minlength="0" or required do not seem to be enacted against the form property.</p>
  
  <pre><code>&lt;form&gt;
     &lt;div awesome-input ng-model="formData.awesome"&gt;&lt;/div&gt;   &lt;!-- this won't validate properly --&gt;
     &lt;input type="text" ng-model="formData.first_name" required name="first_name"&gt;  &lt;!-- this does --&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>Here's the plunkr: <a href="http://plnkr.co/edit/K7jsWOY6S7nxCMW0g3aC" rel="nofollow">http://plnkr.co/edit/K7jsWOY6S7nxCMW0g3aC</a></p>
  
  <p>To reproduce the error, simply notice that you can type less than 6 characters in the first input and no error shows up when you unfocus.  The second input does show the error properly.  If you check the html (view page source) you will notice both have the same markup and should work... </p>
  
  <p>It seems the issue is related to the directive template.  If you take the error view markup out of the directive template and into the index.html, it actually shows the error correctly.</p>
  
  <p>Any ideas on what I should do?</p>