Directive scope is not getting destroyed

Question

I am using directive which is using ng-file-upload for uploading files. This directive is included in modal window called from main controller. I am calling $rootScope.$broadcast event from main controller and listening for that event in directive. I have issues when user is opening modal twice( or more times), it seems that directive scope for each invoked directive is not destroyed and it goes 2 times in scope.$on directive call.

Modal View

<div class="dup-group-doc2 col-md-9" data-ng-if="carvm.isEdit">
    <upload-document add-button="true" delete-button="false" review-obj="carvm.review" document-types="carvm.documentTypes" agencies="carvm.agenciesByReview" module="'CAR'" show-upload-button="false" show-add-button="true" event="carvm.event">>
    </upload-document>
</div>

Main controller

     function openImpModal(isMultiple, isEdit, finding, eventId, event) {
            followupvm.isMultiple = isMultiple || false;
            followupvm.isEdit = isEdit || false;
            followupvm.finding = finding;
            followupvm.eventId = eventId;
            followupvm.impModalInstance = $uibModal.open({
                animation: true,
                size: 'lg',
                templateUrl: "src/app/modules/planning/views/modals/implementation.modal.view.html",
                controller: 'ImplementationModalController as impvm',
                backdrop: 'static',
                keyboard: false
            });

            followupvm.impModalInstance.result.then(function(selectedItem) {

                if (selectedItem.object !== {}) {
                        $rootScope.$broadcast('callDirective', object);
                }
            }
});

Directive View

<div class="form-group row">
                        <label for="customDocName" class="col-md-4 control-label text-right">Document Name:</label>
                        <input type="text" class="col-md-3" id="customDocName" placeholder="Name document (optional)" data-ng-model="reviewObj.docObj.docName" data-ng-change="onChange()">
                        <input ng-if="!isEdit" type="file" class="col-md-5" ngf-select ng-model="$parent.docFile" name="file" ngf-max-size="5MB" required value="Choose File" ngf-model-invalid="errorFile" validfile>
                    </div>

Directive controller

(function() {
    'use strict';

    angular
        .module('planning')
        .directive('uploadDocument', uploadDocument);

    uploadDocument.$inject = ['DocumentService', 'Upload', 'configParams', '$timeout', '$rootScope', 'CommentService'];

    /* @ngInject */
    function uploadDocument(DocumentService, Upload, configParams, $timeout, $rootScope, CommentService) {
        var directive = {
            link: link,
            restrict: 'AE'
            scope: {
                index: "@?",
                addButton: "=?",
                loggedUser: "=",
                deleteButton: "=?",
                reviewObj: "=?",
                documentTypes: "=",
                agencies: "=?",
                module: "=",
                event: "=?",
                showUploadButton: "=?",
                showAddButton: "=?",
                isEdit: "=?",
                fileObj: "=?"
            },
            templateUrl: 'src/app/modules/planning/directives/document-upload/documentUpload.view.html'
        };
        return directive;

        function link(scope, element, attrs) {

            scope.reviewObj.docObj = {};
            scope.docFile = {};
            scope.reviewObj.docObj.restricted = false;
            scope.showPreviousComments = false;
            scope.documentTypeRequired = false;
            scope.objectAdded = false;

            scope.uploadClicked = false;

            /* istanbul ignore if */
            if (scope.isEdit) {
                scope.reviewObj.docObj.docName = scope.fileObj.documents.documentName;
                if (scope.reviewObj.docObj.docName === 'undefined') {
                    scope.reviewObj.docObj.docName = '';
                }
                scope.reviewObj.docObj.restricted = scope.fileObj.documents.restricted;
                scope.reviewObj.docObj.selectedDoc = scope.fileObj.documents.refDocTypeId;
                scope.reviewObj.docObj.previousComments = scope.fileObj.comments;
            }
            scope.uploadDoc = function(file, newEvent) {
                // code for uploading document                
            };

            $rootScope.$on('callDirective', function(event, object) {
                    **// If I open same modal twice second time when $rootScope event is send it will go twice to this $on event**
                if (scope.module === object.moduleName) {
                    if (!scope.objectAdded) {
                        scope.eventModule = object.moduleName;
                        scope.event = object.event;
                        scope.findingsIdList = object.findingsIdList;
                        scope.reviewObj.docObj = object.uploadObject;
                        scope.objectAdded = true;
                        scope.uploadDoc(object.fileToUpload, true);
                    }
                }
            });
        }
    }
})();

Answer 1

I can't say if your directive is destroyed or not, but with your current code, your listener is not destroyed with the scope anyway.

$rootScope.$on('callDirective', function(event, object) { ... });

This line returns a unregistering function. You have to use it when your scope is destroyed.

var unregister = $rootScope.$on('callDirective', function(event, object) { ... });

scope.$on('$destroy', unregister);