AngularJS File Change Directive

var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope) {
  $scope.files = [];
  

  $scope.doSubmit = function() {
    console.log("Submit File:", $scope.files);
  }
  $scope.doFileChange = function() {
    console.log("doFileChange:", $scope.files);
  }

});

app.directive('input',function(){
  return {
    restrict: 'E',
    scope: {
      ngModel: '=',
      ngChange: '&',
      type: '@'
    },
    link: function (scope, element, attrs) {
      if(scope.type.toLowerCase()!='file'){
        return;
      }
      element.bind('change', function(){
        let files =  element[0].files;
        scope.ngModel = files;
        scope.$apply();
        scope.ngChange();
      });
    }
  }
  
})

<!DOCTYPE html>
<html ng-app="plunker">

  <head>
    <meta charset="utf-8" />
    <title>AngularJS File Change</title>
    <script>document.write('<base href="' + document.location + '" />');</script>
    <link rel="stylesheet" href="style.css" />
    <script data-require="angular.js@1.5.x" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.11/angular.min.js" data-semver="1.5.11"></script>
    <script src="app.js"></script>
  </head>

  <body ng-controller="MainCtrl">
    <h1>AngularJS File Change Directive</h1>
    <form name="FormName" ng-submit="doSubmit()">
      <input name="file" type="file" ng-model="files" ng-change="doFileChange()" multiple>
      <button>Submit</button>
    </form>
    <section ng-if="files.length>0">
      <h2>File Names</h2>
      <ul>
        <li ng-repeat="file in files">
          {{ file.name }}
        </li>
      </ul>
      
    </section>
  </body>

</html>

/* Put your css in here */