title: How to validate form with input[type=file] in angularjs
body: <p>HTML:</p>
  
  <pre><code>&lt;form name="form"&gt;
      &lt;input type="file" ng-model="document" valid-file required&gt;
      &lt;input type="submit" value="{{ !form.$valid &amp;&amp; 'invalid' || 'valid' }}"&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>Custom directive to listen for input[type=file] changes:</p>
  
  <pre><code>myApp.directive('validFile',function(){
      return {
          require:'ngModel',
          link:function(scope,el,attrs,ngModel){
  
              //change event is fired when file is selected
              el.bind('change',function(){
                   scope.$apply(function(){
                       ngModel.$setViewValue(el.val());
                       ngModel.$render();
                   });
              });
          }
      };
  });
  </code></pre>
  
  <p>When file is selected following error appears in console:</p>
  
  <blockquote>
    <p>Error: InvalidStateError: DOM Exception 11 Error: An attempt was made
    to use an object that is not, or is no longer, usable.</p>
  </blockquote>
  
  <p>Try with plunkr: <a href="http://plnkr.co/edit/C5j5e0JyMjt9vUopLDHc?p=preview">http://plnkr.co/edit/C5j5e0JyMjt9vUopLDHc?p=preview</a></p>
  
  <p>Without the directive the the state of the input file field wont be pushed to form.$valid. Any ideas why I get this error and how to fix this?</p>