Highcharts: Handling ng-click on tooltips

Question

I need some help with a problem I am encountering. I created a chart and a custom tooltip, whenever the user clicks on the tooltip, it should call the $scope function.

Answer 1

Compile the tooltip element after the tooltip appears.

In the pointFormatter return string:

pointFormatter: function() {              
  return "<p style='color:red' ng-click='handleClick()'>Click here</p>"
}

In the click callback:

events: {
  click: function(e) {
    tooltip.refresh(e.point, e);
    $compile(tooltip.label.div)(scope)
  }

example: http://jsfiddle.net/mj9mj1n5/