title: How to handle Highcharts events from an AngularJS directive?
body: <p>Using an AngularJS directive, I am able to load a Highcharts graph. However, my event handler for clicking on a point is not being executed. </p>
  
  <p><a href="http://plnkr.co/edit/pxU0IsBTrvcEwr2Znf5d?p=preview" rel="nofollow">http://plnkr.co/edit/pxU0IsBTrvcEwr2Znf5d?p=preview</a></p>
  
  <p>JS</p>
  
  <pre><code>var app = angular.module('charts', []);
  
  app.directive('highchart', function () {
      return {
          restrict: 'E',
          template: '&lt;div&gt;&lt;/div&gt;',
          replace: true,
  
          link: function (scope, element, attrs) {
  
              scope.$watch(function() { return attrs.chart; }, function() {
  
                if(!attrs.chart) return;
  
                var chart = JSON.parse(attrs.chart);
  
                $(element[0]).highcharts(chart);
  
              });
  
          }
      }
  });
  
  function Ctrl($scope) {
      $scope.example_chart = {
        xAxis: {
          categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
        },
  
        plotOptions: {
          series: {
            cursor: 'pointer',
            point: {
                events: {
                    click: function() {
                        alert ('Category: '+ this.category +', value: '+ this.y);
                    }
                }
            }
          }
        },
  
        series: [{
          data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
        }]
    };
  }
  </code></pre>
  
  <p>HTML</p>
  
  <pre><code>&lt;section ng-app='charts'&gt;
      &lt;div ng-controller="Ctrl"&gt;
         &lt;highchart chart='{{example_chart}}'&gt;&lt;/highchart&gt;
      &lt;/div&gt;
  &lt;/section&gt;
  </code></pre>