I have run into a scoping problem when creating click functions on the nodes of my graphs built using Angularjs, Highcharts and the highcharts-ng directive.
The problem I am having is that any angular directives or functionality I place in my click function does not work.
Here is a simplified version of my problem - http://jsfiddle.net/47m46/8/
Click on any graph node to see the click function being called. Clicking on the close button should fire an ng-click event which loads up a simple function that displays an alert
This is the html that my click function generates:
<div ng-controller="myctrl">
<button ng-click="closeDrillDown()">Close</button>
<h2>Positive Sentiment</h2>
<p class="drillDownInfo"><strong>20%</strong> of posts where we can determine a sentiment are Positive</p>
</div>
This is the function called with ng-click which does not get triggered
$scope.closeDrillDown = function() {
alert('function works');
};
The author of the highcharts-ng directive mentioned in the following thread https://github.com/pablojim/highcharts-ng/issues/56 that "These events (click function) will be outside of the angular world though so you'll need to wrap them with an apply or similar."
So my question is: How do I give my highcharts click function access to Angularjs? I have tried to use $scope.$apply() but my limited knowleadge of this facet of angular has not given me any results.
