title: AngularJS custom directive not updating model with chosen file
body: <p>I've written my first custom directive, <code>ng-file-chosen</code> that should assign the file name that has been selected in an <code>&lt;input&gt;</code> element to the binding passed in through ng-model.</p>
  
  <p>In the following snippet, the ng-file-chosen result is bound to <code>model.file</code> and there is a binding below to show the chosen value.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var app = angular.module('app', []);
  app.controller('controller', function ($scope) {
      $scope.model = {
          file: "No file selected"
      };
  });
  
  var directive = function () {
      return {
          restrict: 'A',
          require: 'ngModel',
          scope: {
              ngModel: '='
          },
          link: function (scope, element, attributes) {
              element.change(function (e) {
                  var files = (e.srcElement || e.target).files;
                  scope.ngModel = files[0];
              });
          }
      };
  };
  
  app.directive('ngFileChosen', directive);</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;div ng-app="app" ng-controller="controller"&gt;
      &lt;input type="file" ng-file-chosen="" ng-model="model.file"/&gt;
      &lt;p&gt;{{model.file}}&lt;/p&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Unfortunately, when selecting a file nothing happens and the binding does not update. I have tried inspecting the generated HTML, and it appears as if the link function isn't running at all, because the input element's full HTML on run is:</p>
  
  <p><code>&lt;input type="file" ng-file-chosen="" ng-model="model.file" class="ng-pristine ng-valid ng-isolate-scope ng-touched"&gt;</code></p>
  
  <p>What could be causing the directive not to run successfully?</p>