How to get a reference to transcluded element in AngularJS component

Question

We are trying to build a component that uses transclude with several slots.

The component looks something like this:

import templateUrl from './pop-box.html';
import './pop-box.scss';

const PopBoxComponent = {
    bindings: {},
    transclude: {
        'trigger': 'popBoxTrigger',
    },
    templateUrl,
    controller: class PopBoxComponent {

    },
};

export default PopBoxComponent;

With it's html as:

<div class="pop-box">
    <ng-transclude ng-transclude-slot="trigger"></ng-transclude>
</div>

It is intended to be used as follows:

<ps-pop-box>
        <pop-box-trigger>
            <button type="button"class="btn btn-transparent">
                Button
            </button>
        </pop-box-trigger>
    </ps-pop-box>

Now, everything is rendered property. But, I need to attach an event to the transcluded button.

Is it possible an how to get an access to the transcluded element?

Maybe there is another option to attached an event to a button that calls a function inside the component.

Some more details

the resulting html from the above is:

<ng-transclude ng-transclude-slot="trigger"><pop-box-trigger class="ng-scope">
            <button type="button" data-ng-disabled="$ctrl.disabled" class="btn btn-transparent ng-binding">
                <i class="far fa-user fa-fw"></i>
                Assign
            </button>
        </pop-box-trigger></ng-transclude>

So, if I add an event to <ng-transclude ng-transclude-slot="trigger" on-click="onClick()"></ng-transclude>, it will bound to the ng-transclude element instead of on the button.

How can I make it set on a button?