title: Access file input in controller using Angular UI Bootstrap modal
body: <p>I have a question for all you AngularJs gurus out there. I am attempting to create modal wherein a user can submit files for upload. I have most of the problem sorted, however, I seem to be running into issues concerning scope. The technologies I am using are Angularjs, Angular UI Bootstrap and a custom file model directive.</p>
  
  <p>I have a custom fileModel directive which on file selection updates the scope:</p>
  
  <pre><code>app.directive('fileModel', ['$parse', function($parse) {
      return {
          restrict: 'A',
          link: function(scope, element, attrs) {
              var model = $parse(attrs.fileModel);
              var modelSetter = model.assign;
              element.bind('change', function() {
                  scope.$apply(function() {
                      modelSetter(scope, element[0].files[0]);
                  });
              });
          }
      }
  }]);
  </code></pre>
  
  <p>I use UI bootstrap to create the modal as per the documentation (<a href="http://angular-ui.github.io/bootstrap/#/modal" rel="nofollow">http://angular-ui.github.io/bootstrap/#/modal</a>). Please note the file-model="file" directive in the input field, this is what I am trying to access. </p>
  
  <pre><code>&lt;div ng-controller="ModalDemoCtrl"&gt;
  
      // Button to open model
      &lt;button class="btn btn-default" data-ng-click="open()"&gt;Upload File&lt;/button&gt;
  
      // Simple Form in model
      &lt;script type="text/ng-template" id="myModalContent.html"&gt;
          &lt;form name="form.myForm" class="form-horizontal" data-ng-submit="addFile()" role="form" novalidate&gt;
  
              &lt;div class="modal-header"&gt;
                  &lt;h3 class="modal-title"&gt;Upload File&lt;/h3&gt;
              &lt;/div&gt;
              &lt;div class="modal-body"&gt;
                  &lt;div class="form-group"&gt;
                      &lt;label for="file" class="col-sm-2 control-label"&gt;Input File&lt;/label&gt;
                      &lt;div class="col-sm-10"&gt;
                          &lt;input type="file" name="file" file-model="file"&gt;               
                      &lt;/div&gt;
                  &lt;/div&gt;  
              &lt;/div&gt;
              &lt;div class="modal-footer"&gt;
                  &lt;button type="submit" class="btn btn-default"&gt;Submit&lt;/button&gt;
              &lt;/div&gt;
  
         &lt;/form&gt;
     &lt;/script&gt;
  
  &lt;/div&gt;
  </code></pre>
  
  <p>Lastly I have the controller(s), again as per the Bootstrap UI documentation. Please note where I try to access $scope.file.</p>
  
  <pre><code>app.controller('ModalDemoCtrl', ['$scope', '$http', '$modal', function ($scope, $http, $modal) {
  
      $scope.open = function () {
  
          var modalInstance = $modal.open({
              templateUrl: 'myModalContent.html',
              controller: ModalInstanceCtrl,
              resolve: {
                  $http: function () {
                      return $http;
                  }
              }
          });
  
          modalInstance.result.then(function () {
              // do something
          }, function () {
              // do something
          });
      };
  
  }]);
  
  var ModalInstanceCtrl = function ($scope, $modalInstance, $http) {
  
  $scope.addFile = function() {
      var formData = new FormData();
      formData.append('file', $scope.file);
      $http.post(            
          '/valid/ajax/url', formData, {
              transformRequest: angular.identity,
              headers: {'Content-Type': undefined}
          }).success(function(data, status, headers, config) {
              // do something on success
          });
      );
  };
  </code></pre>
  
  <p>I know there are some issues with regards to scope within modals when using angular UI bootstrap... unfortunately I am not experienced enough to find a solution. Currently, I am unable to access the file a user selects to be sent via ajax. Please help. Thanks.</p>