Use same angularjs directive in two different controller

I am uploading image using directive

angular.module("Test").directive('fileModelPhoto', ['$parse', function ($parse) {
    return {
        restrict: 'A',
        link: function (scope, element, attrs) {            
            var model = $parse(attrs.fileModelPhoto);
            var modelSetter = model.assign;
            scope.socialPostVM.filelist = [];
            element.bind('change', function () {
                scope.$apply(function () {
                    var file = [];
                    file.push(element[0].files[0]);
                    modelSetter(scope, file);
                    scope.socialPostVM.fileuploaded = true;
                    scope.socialPostVM.attachmentmessage = "";
                    for (var i = 0; i < file.length; i++) {
                        var item = file[i];
                        if (item.type.indexOf('image') == 0) {
                            var ext = item.type;
                            scope.socialPostVM.filelist[i] = item;
                        }
                        else {
                            scope.socialPostVM.attachmentmessage = 'Please upload only image';
                            scope.socialPostVM.filelist = [];
                            scope.socialPostVM.attachment = [];
                        }
                    }
                });
            });
        }
    };
}]);


I am uploading image using directive

angular.module("Test").directive('fileModelPhoto', ['$parse', function ($parse) {
    return {
        restrict: 'A',
        link: function (scope, element, attrs) {            
            var model = $parse(attrs.fileModelPhoto);
            var modelSetter = model.assign;
            scope.socialPostVM.filelist = [];
            element.bind('change', function () {
                scope.$apply(function () {
                    var file = [];
                    file.push(element[0].files[0]);
                    modelSetter(scope, file);
                    scope.socialPostVM.fileuploaded = true;
                    scope.socialPostVM.attachmentmessage = "";
                    for (var i = 0; i < file.length; i++) {
                        var item = file[i];
                        if (item.type.indexOf('image') == 0) {
                            var ext = item.type;
                            scope.socialPostVM.filelist[i] = item;
                        }
                        else {
                            scope.socialPostVM.attachmentmessage = 'Please upload only image';
                            scope.socialPostVM.filelist = [];
                            scope.socialPostVM.attachment = [];
                        }
                    }
                });
            });
        }
    };
}]);
In html page, i access this directive like below:(controller as socialPostVM)
<div class="types">
                            <span>Attach:</span>
                            <ul>
                                <li><a href="" ng-click="socialPostVM.uploadfile($event)"><img src="/content/images/camera.png" alt="">Photo</a></li>

                            </ul>
                            <div ng-show="scope.fileuploaded">
                                <ul>
                                    <li ng-repeat="file in socialPostVM.filelist">
                                        {{file.name}}
                                    </li>
                                </ul>
                            </div>
                            <input type="file" id="mediaUpldCntrl" class="default_brows_flie" name="pic" accept="all" style="display:none" file-model-photo="socialPostVM.attachment">
                            <div class="clearfix"></div>
                        </div>

Now I need to use this same file upload directive in another html page. (controller as vm) How can i access this same directive in two different controller?

What I have tried:

I didn't tried anything. actually I dont know what to do.