Cannot update Highcharts series in click event with highcharts-ng

Question

I am using angular.js and highcharts-ng (https://github.com/pablojim/highcharts-ng) to display a group of charts. I need to update a chart based on a click event of another chart. I can do everything I want to in the controller but when I have code in the click event (even though $scope is available) I cannot seem to get the chart to redraw after I set the series data. This works fine in a method in the controller.

I have tried using $apply, and also looking up the chart object in the Highcharts.charts array to call redraw on the chart and it did not work. I noticed that the charts instantiated with highcharts-ng do not seem to have the same functions on them as ones instantiated in the JQuery style (such as Series.setData).

From this fiddle (http://jsfiddle.net/gregorydickson/mJjk2/):

var myapp = angular.module('myapp', ["highcharts-ng"]);
myapp.controller('myctrl', function ($scope) {

    $scope.addSeries = function () {
        $scope.highchartsNG.series = [{
            data: [55, 33, 41, 23, 37]
        }]  
    }
    $scope.highchartsNG = {
        options: {
            chart: {
                type: 'line'
            }
        },
        series: [{data: [10, 15, 12, 8, 7]}],
        title: {
            text: 'Hello'
        },
        loading: false
    }

    $scope.highchartsNG2 = {
        options: {
            chart: {
                type: 'line'
            }
        },
        series: [{
            data: [1, 2, 3, 8, 7],
             events: {
                        click: function (e) {
                            alert("hit the click");
                            //this does not work!!
                            $scope.highchartsNG.series = [{
                                data: [11, 22, 33, 44, 33,22,11]}];
                        }
                    }
        }],
        title: {
            text: 'Hello 2'
        },
        loading: false
    }

});

HTML:

<div ng-app="myapp">
    <div ng-controller="myctrl">

        <button ng-click="addSeries()">Change Data</button>

        <highchart id="chart1" config="highchartsNG"></highchart>
        <highchart id="chart2" config="highchartsNG2"></highchart>
    </div>
</div>

Answer 1

My final solution ended up being to create my own directives, not use highcharts-ng and update the data on the chart in the click event by getting the chart in the Highcharts.charts[] (array).

 point: {
    events: {
       click: function(e) {
          Highcharts.charts[2].setTitle({text:"Load Profile "+ formattedDate},{},false);
          Highcharts.charts[2].series[0].setData(newday[0].values, false);                                       
          Highcharts.charts[2].series[1].setData(newday[0].temps, false);
          Highcharts.charts[2].redraw();