AngularJs: How to check for changes in file input fields?

Question

I am new to angular. I am trying to read the uploaded file path from HTML \'file\' field whenever a \'change\' happens on this field. If i use \'onChange\' it works but when

Answer 1

Working Demo of "files-input" Directive that Works with ng-change¹

To make an element work the ng-change directive, it needs a custom directive that works with the ng-model directive.

The DEMO

angular.module("app",[])
.directive("filesInput", function() {
  return {
    require: "ngModel",
    link: function postLink(scope,elem,attrs,ngModel) {
      elem.on("change", function(e) {
        var files = elem[0].files;
        ngModel.$setViewValue(files);
      })
    }
  }
})

.controller("ctrl", function($scope) {
     $scope.onInputChange = function() {
         console.log("input change");
     };
})

  
    
AngularJS Input `type=file` Demo
    
    
    
    
Files
    

      {{file.name}}