Angular Validation doesnt work for File Input with 'Required' attribute

by manoj

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<div ng-app="app" ng-controller="MyController">
    <form name="userForm">
        <ng-form name="thisForm">
             <div>
                 <input type="text" name="textfield" ng-model="textfield" required />  (This Validation works for Text Field)
                <span ng-show="thisForm.textfield.$error.required" class="help-block">This is required!</span>
            </div>
        </ng-form>
         <ng-form name="thatForm">
             <div>
                 <input type="file" valid-file name="filefield" ng-model="filefield" ng-required="true" /> (Validation doesnt work even after choosing a file!) <br />
               <span ng-show="thatForm.filefield.$error.required">This is required!</span> 
             </div>
          </ng-form>
    </form>

    <br />
    userForm: {{ userForm.$valid }}     <br />
    thisForm: {{ thisForm.$valid }}     <br />
    thatForm: {{ thatForm.$valid }}
</div>

JavaScript

var app = angular.module('app', []);
app.controller('MyController', function($scope) {

    
    
});
app.directive('validFile',function(){
  return {
    require:'ngModel',
    link:function(scope,el,attrs,ngModel){
      el.bind('change',function(){
        scope.$apply(function(){
          ngModel.$setViewValue(el.val());
          ngModel.$render();
        });
      });
    }
  }
});