Event Handler not fired in AngularJS

Question

I have 2 directives in AngularJS app., and I have a button to open a popup modal in a directive, so I fire event when the button clicked to run a function from the other directive. the issue is the event not fired.

the code: this the event handler

(function () {
'use strict';
function eventHandler($rootScope, $document, coreConfig) {
    var action = {};

    action.fireEvent = function (eventName, args, fireJavaScriptEvent) {
        $rootScope.$emit(eventName, args);
        if (fireJavaScriptEvent) {
            action.fireJavaScriptEvent(eventName, args, 'change');
        }
    };

    action.onEventFired = function (eventName, scope, func) {
        var unbind = $rootScope.$on(eventName, func);
        scope.$on('$destroy', unbind);
    };

    action.fireJavaScriptEvent = function (eventName, args, eventType) {
        if (!args) {
            args = {};
        }
        args.eventType = eventType;
        var event = {
            type: coreConfig.dashboardExternalEvents[eventName],
            time: new Date(),
            args: args
        };
        $document.ready(function () {
            $document.trigger(event);
        });
    };

    //#region External Events Handling

    function onNotifyDashboard(e) {
        e.stopPropagation();
        action.fireEvent(e.args.EventType, e.args);
    }

    action.eventType = {
        ParentRoleSelected: 'ParentRoleSelected',
        StudentSelected: 'StudentSelected',
        SubOrganizationSelected: 'SubOrganizationSelected',
        ThemeChanged: 'ThemeChanged',
        WebPartFormSelectionChanged: 'WebPartFormSelectionChanged',
        LanguageSelected: 'LanguageSelected',
        MenuResized: 'MenuResized',
        StudentAdded: 'StudentAdded',
        StudentAddReady: 'StudentAddReady',
        AppModalOpen: 'AppModalOpen',
        AddModalOpen: 'AddModalOpen'

    };

    $document.off(coreConfig.dashboardExternalEvents.NotifyDashboard.EventName)
        .on(coreConfig.dashboardExternalEvents.NotifyDashboard.EventName, onNotifyDashboard);

    //#endregion External Events Handling

    return action;
}
angular.module('mrf.dashboard.core').factory('EventHandler', ['$rootScope', '$document', 'CoreConfig', eventHandler]);})();

this is the directive which has the button:

    <a class="PopupLink" data-ng-show="vm.showAddModalIcon"
   data-ng-click="vm.openAddModal()">
    <i class="fa fa-bullhorn" aria-hidden="true"></i>
</a>

this is the fire event code:

vm.openAddModal = function () {
            eventHandler.fireEvent(eventHandler.eventType.AddModalOpen, {});
        };

and this the on event fired code:

eventHandler.onEventFired(eventHandler.eventType.AddModalOpen, $scope, function (action, args) {
            loadModal();
        });

and this is the load modal code:

var loadModal = function () {
            
            $uibModal.open({
                templateUrl: 'adModalContent_' + parentRoleId + '.html',
                backdrop: 'static',
                keyboard: false,
                controller: ['$scope', '$uibModalInstance', function ($scope, $uibModalInstance) {  

                    $scope.closeModal = function () {
                        $uibModalInstance.dismiss();
                    };
                }]
            });
        };