AngularJS <input [type=file]> ng-model does not work in Firefox/Safari/Chrome but works well in IE

Question

I have a to allow the user select an image. Then I have where the select image should be displayed. It works well but IE but when it comes to chrome, firefox and safari, the property binded to ng-model does not updates. It seemd like the 3 browsers does not support ng-model in input type=file

.cshtml

<img alt="Cannot load image" class="img-rounded" id="image" ng-src="convertToBase64(data.ImagePath)" style="width: 150px; height: 150px; object-fit: contain;" />
<input accept="image/*" id="chooseImage" type="file" ng-model="data.ImagePath"/>

Answer 1

I'm afraid ng-model is not supported in input type=file but what you can do is implement a directive that does that for you.

Answer 2

This isn't exactly what you want, but this is the defacto directive i use for validating file inputs... might help you.

/*
        validFile
        properly updates the form validation model for input[type=file]

    */
    .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();
            });
          });
        }
      }
    })