[Solved]-Rendering Highcharts using Angular js Directives-Highcharts

alternative implementation here: http://jsfiddle.net/pablojim/cp73s/

this uses https://github.com/pablojim/highcharts-ng

this allows you to create a highchart with the below html:

<highchart id="chart1" series="chart.series" title="chart.title" options="chart.options"></highchart>

in the above case chart.series is an array of javascript objects representing the series on the chart - these take standard highcharts options. these are then watched by angularjs for any changes.

chart.options is the highcharts initalisation options - also watched for changes. although changes to this recreate the entire chart.

chart.title is the highcharts title object - also watched for changes.

example of pie chart:

http://jsfiddle.net/cstzc/

    function myctrl($scope, limittofilter) {
  $scope.ideas = [
    ['ideas1', 1],
    ['ideas2', 8],
    ['ideas3', 5]
  ];

  $scope.limitedideas = limittofilter($scope.ideas, 2);
}

angular.module('myapp', [])
  .directive('hcpie', function () {
  return {
    restrict: 'c',
    replace: true,
    scope: {
      items: '='
    },
    controller: function ($scope, $element, $attrs) {
      console.log(2);

    },
    template: '<div id="container" style="margin: 0 auto">not working</div>',
    link: function (scope, element, attrs) {
      console.log(3);
      var chart = new highcharts.chart(options);
      scope.$watch("items", function (newvalue) {
        chart.series[0].setdata(newvalue, true);
      }, true);

    }
  }
});