title: ngModel Not Updating In Directive
body: <p>I have a directive that detects the change of a file input and aims to set a model. However the imagefile model is not being set after the file change. I have been able to print out the values of controller.modelValue[0].name and it is set. However when it returns the image file model is null. </p>
  
  <p>Any suggestions on how to fix this or what am I doing incorrect?</p>
  
  <p>The HTML code is here</p>
  
  <pre><code>&lt;input type="file" id="fileInput" multiple ng-model="imagefile" file-feed/&gt; 
  </code></pre>
  
  <p>The directive for the file-feed attribute is </p>
  
  <pre><code>.directive('fileFeed', [
          function() {
              return {
                  restrict: 'A',
                  require: 'ngModel',
                  link: function(scope, element, attributes, controller) {
                      element.bind("change", function(changeEvent) {
                          //alert("fired");
                          var files = [];
                          for (var i = 0; i &lt; element[0].files.length; i++) {
                              //alert(element[0].files[i].name);
                              files.push(element[0].files[i]);
                          }
  
                          controller.$modelValue = files;
  
                          scope.$apply(function(){
                              **controller.$modelValue = files;**
                              console.log(controller.$modelValue[0].name);
                          });
                      });
                  }
              };
          }
      ]);
  </code></pre>
  
  <p>The modal controller is here </p>
  
  <pre><code>.controller('ProfilePictureModalInstanceCtrl', function ($scope, $modalInstance, items, $timeout) {
  
      $scope.imagefile = "";
  
      $scope.checkImageFiles = function(){
          console.log($scope.imagefile);
      }
  
      $scope.ok = function () {
          $modalInstance.close($scope.optionItems);
      };
  
      $scope.cancel = function () {
          $modalInstance.dismiss('cancel');
      };
  })
  </code></pre>
  
  <p>I have a button in the modal that calls a function in the controller to print out the value of image file.</p>
  
  <pre><code>&lt;button ng-click="checkImageFiles()"&gt;Check Images&lt;/button&gt;
  </code></pre>
  
  <p>I am trying to return the file via the controller.modelValue property</p>