I am using highcharts-ng within an angular app, I need to run a function when the xAxis labels are clicked see below the categories and labels I am adding to the chart.
Currently I can add an onclick to the label and alert but am not able to get this to work with angular.
return "<a onclick='alert(1)'>" + this.value + "</a>";
http://pablojim.github.io/highcharts-ng/
Working example of current code here. http://jsfiddle.net/3gLr4vcu/
Angular directives are not processed until $compile is called, which is usually done when Angular inserts templates, for directives and ng-include for instance. If you modify the DOM yourself, Angular doesn't know quite what do with the HTML unless you call $compile yourself. After the DOM is modified by highcharts-ng, you will need to call $compile like this:
$compile(element)(scope)
Ideally you want element to be an element that hasn't been $compiled already (I am unsure what happens if that is not the case) and scope to be first scope encountered in an upwards traversal of the DOM tree. If the scope hierarchy is not needed, then you can just attach the element to the $rootScope.
You will need to inject $compile (as well as $rootScope if you use it as described). For more information, see the $compile documentation, which also explains the odd syntax off the $compile expression. If you post your full code, I can tell you where to put the $compile statement and how to find the appropriate scope to use.
EDIT: Here is a working JSFiddle: http://jsfiddle.net/tsclaus/bpg4556c/
