directive.js

angular.module('foo').directive('fileUpload', function($event){
  return {
    restrict: 'E',
    scope: {
      uploadEvent: '='
    },
    template: '<input type="file" style="display: inline-block; height: 100%; width: 100%"></input>',
    link: function(scope, element){
      var input = element.find('input');
      element.css('display', 'inline'); //make sure the element itself behaves like an input visually so
                                        //it contains child input element, applying the same natural behavior
      element.on('click', input.trigger.bind(input)); //forward click events to the input element
      
      input.on('change', function (e) {
        var file = e.target.files[0];
        if (file && scope.uploadEvent) $event.emit(scope.uploadEvent, file);
      });
    }
  }
});

gistfile1.js

angular.module('foo').controller('FooCtrl', function($event, $scope){
  
  //The following would return something like $scope.$id + "UploadEvent",
  //which will always be unique because $scope.$id is always unique
  this.UploadEvent = $event.getScopeNamespace($scope, 'UploadEvent');
  
  $event.on(this.UploadEvent, function(file){
    //do something with the file here
  }, $scope); //in this pretend service, we are passing $scope 
              //with the listener so that the service will destroy 
              //the listener when $scope#$destroy occurs
});

view.html

<div ng-controller="FooCtrl as Foo">
  <file-upload output-event="Foo.UploadEvent"></file-upload>
</div>

You might want to check https://github.com/danialfarid/ng-file-upload as well for some ideas how to implement it