How to define common directives in controllerAs syntax, which will be independent of controller and can be used in any controller?

[Xyroid]

I want to create a directive, which will give me the file name and file type when it's picked in html's input file tag. I am using change event of input tag.

In $scope controller design we can do like given below and I can use it in any controller and file data will be available in $scope.file

app.directive('file', function() {
  return {
    restrict: 'AE',
    scope: true,
    link: function(scope, el, attrs){
      el.bind('change', function(event){
        var files = event.target.files;
        var file = files[0];
        scope.file = file;
        scope.$apply();
      });
    }
  };
});

In controllerAs syntax I have to pass controller property which will restrict me to use in that controller. To use in all the controllers I have to create duplicate directives only with different controller name.

app.directive('file', function() {
  return {
    controller: MyController, // I don't want to use in single controller, I want it to be usable in all controllers
        restrict: 'AE',
    controllerAs: 'vm',
    link: function(scope, el, attrs, vm){
      el.bind('change', function(event){
        var files = event.target.files;
        var file = files[0];
        vm.file = file;
      });
    }
  };
});

So how can I achieve it?

[Xyroid]

@joshstar you mean to say it's not possible to define common controllers. Either I have to use $scope or have to go for duplicate directives each for controllers.