How can I trigger an angularjs event handler from another handler?

I'm using AngularJS 1.3.0-beta.2, jQuery 2.1.0, Angular UI 0.11, and my custom version of Angular UI's Tooltip widget, and I want buttons within my tooltip to close the tooltip when clicked.

Plunkr

The key part is at crud_tooltip.js:372:

  scope.closePopup = function() {
    var trigger = element.prev();
    if (scope.mode === 'timeout') {
      $timeout(function() {
        trigger.triggerHandler('click');
      });
    }
    else {
      trigger.triggerHandler('click');
    }
  };

The version using $timeout works, but there's a noticeable delay between clicking the button and seeing the popup close.

The version not using $timeout gives an error: [$rootScope:inprog] $apply already in progress. It then closes the popup anyway... I'm not sure why.

How can I modify closePopup (or the ng-click that calls it) to make the tooltip close immediately when the user clicks the button within the tooltip?

Note: I adapted my custom_tooltip.js code from Angular UI's tooltip code, using this Plunker as a guideline. I've also tried directly changing the tt_isOpen value and defining a new crudtooltip-toggle attribute, both with very limited success.

Maybe I'm missing the point, but your code seems incredibly complicated and convoluted for such simply functionality. In any case, the delay is actually due to a $timeout which is waiting for some animation to finish. The timeout is triggered because scope.tt_animation evaluates to truthy. Simply changing the timeout to 0 at line 258 of crud_tooltip.js fixes the issue. See this plunk

Here's the problem area:

            if ( scope.tt_animation ) {
              transitionTimeout = $timeout(removeTooltip, 500);
            } else {
              removeTooltip();
            }