Cannot run a function which is defined in scope from clickable tooltips of nvd3 charts

Question

I have been trying to define a function in scope and trigger it when button is clicked in the tooltip. Here is the code that I have been working on in plnkr Clickable tooltips. I have modified plnkr code in the link as shown:

tooltip.contentGenerator(function (d){
          var html =
          '<h3 style="color:white;background-color:black;">' + d.value + '</h3>' +
          '<div class="btn-group-vertical" style="color:white;background-color:black;">' +
          '<div class="inline">'+
          ' <a href="http://www.w3schools.com/html/" class="btn btn-info btn-xs" role="button">ZOOM</a><pre>  '+ d3.time.format('%x')(new Date(d.point.x)) +
          '</pre></div>'+
          '<hr/>'+
          '<div class="inline">'+
          ' <button type="button" class="btn btn-info btn-xs" ng-click="sayHi()">ZOOM</button><pre>  ' + d.point.y +
          '</pre></div>'+
          '<br/>'+
          '</div>';
          return html;
        });

$scope.sayHi = function () {
    console.log('hi');
  };

Thanks in advance.