AngularJS - настроить декоратор на директиву внутри углового интерфейса

Question

В настоящее время я использую angularjs 1.7 и angular-ui / boostrap. Я хочу загружать данные всякий раз, когда пользователь нажимает на выпадающий список, но вместо обработки события щелчка я хотел бы узнать немного больше об угловых js, я предпочитаю использовать decorator для изменения uibDropdownDirective. Вот мой код:

Я нашел подобное решение здесь, но оно не работает в моем случае. Угловой декоратор / расширяющая директива Bootstrap Datepicker пользовательского интерфейса

angular.element(document).ready(() => {
    angular.bootstrap(document, ['myapp']);

    angular.module('myapp').config(['$provide', ($provide: any) => {
        $provide.decorator('uibDropdownDirective', [
            '$delegate', function ($delegate: any, $controller: any) {

                var directive = $delegate[0];
                var controllerName = directive.controller;

                directive.controller = function ($scope: any, $element: any, $attrs: any, $parse: any, dropdownConfig: any, uibDropdownService: any,
                    $animate: any, $position: any, $document: any, $compile: any, $templateRequest: any) {
                    var controller = $controller(controllerName, {
                        $scope,
                        $element,
                        $attrs,
                        $parse,
                        dropdownConfig,
                        uibDropdownService,
                        $animate,
                        $position,
                        $document,
                        $compile,
                        $templateRequest
                    });

                    $scope.toggled = function (open: any) {
                        console.log('Dropdown is now: ', open);
                        //Load data
                    };

                    return controller;
                };

                return directive;
            }
        ]);
    }]);
});