title: angularjs upload file with a single upload button
body: <p>I would like to know how can I upload files using angularjs without using external library and just a single upload button?
  I have searched for the solution for a while and found a solution is pretty close to what I want as below:</p>
  
  <pre><code>&lt;div ng-controller = "myCtrl"&gt;
      &lt;input type="file" file-model="myFile"/&gt;
      &lt;button ng-click="uploadFile()"&gt;upload me&lt;/button&gt;
  &lt;/div&gt;
  
  var myApp = angular.module('myApp', []);
  
  myApp.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]);
                  });
              });
          }
      };
  }]);
  
  myApp.service('fileUpload', ['$http', function ($http) {
      this.uploadFileToUrl = function(file, uploadUrl){
          var fd = new FormData();
          fd.append('file', file);
          $http.post(uploadUrl, fd, {
              transformRequest: angular.identity,
              headers: {'Content-Type': undefined}
          })
          .success(function(){
          })
          .error(function(){
          });
      }
  }]);
  
  myApp.controller('myCtrl', ['$scope', 'fileUpload', function($scope, fileUpload){
  
      $scope.uploadFile = function(){
          var file = $scope.myFile;
          console.log('file is ' );
          console.dir(file);
          var uploadUrl = "/fileUpload";
          fileUpload.uploadFileToUrl(file, uploadUrl);
      };
  
  }]);
  </code></pre>
  
  <p><a href="http://jsfiddle.net/JeJenny/ZG9re/" rel="nofollow noreferrer">http://jsfiddle.net/JeJenny/ZG9re/</a>    </p>
  
  <p>However, I want only a upload button and in the above case, how can I trigger uploadFile()?</p>