Using ng-click inside a tooltip

Question

I'm using Angular Bootstrap UI and I have a working tooltip.

HTML:

<div ng-app="helloApp">
  <div ng-controller="helloCtrl as hello"> 
    <a tooltip-trigger="click" tooltip-placement="bottom" uib-tooltip-html="<h1 ng-click='hello.clickInsideToSeeTheWorld()'>Click again!</h1>">Click me to see the tooltip</a>
  </div>
</div>

Javascript:

angular.module('helloApp', ['ui.bootstrap'])

.controller('helloCtrl', helloCtrl)

function helloCtrl() {
  var vm = this;

  vm.clickInsideToSeeTheWorld = function() {alert(123)}
}

When I open up the tooltip, ng-click doesn't work. No alert appears. I receive no errors in my console. This is because the HTML isn't compiled. How can I properly compile the tooltip html to get this to work?

Answer 1

Extending the previous answer: You can probably use uib-tooltip-template instead of uib-tooltip-html when you exploit the angular template cache.

I understand that you maybe do not want to create an external template.html, but you do not have to do so. Simply try:

    var app = angular.module("test", ['ui.bootstrap']);

    app.controller("testController", function($scope, $templateCache) {

      $scope.clickInsideToSeeTheWorld = function() {
            alert(123) 
      }

      if (!$templateCache.get ('template.html')) {
        $templateCache.put (
          'template.html', 
          '<a ng-click="clickInsideToSeeTheWorld()">Click again!</a>'
        );
      }

    });

and

<div ng-app="test" ng-controller="testController">
<p style="margin-top: 5em;" uib-tooltip-template="'template.html'" tooltip-popup-close-delay="3000" >
   Click me to see the tooltip
</p>

Here's an external plunker as well: https://plnkr.co/edit/Dsi69MQg4NfgOSI5ClFh?p=preview