我是新的Angular JS，并试图通过创建一个指令来渲染我的Highcharts(基本线)。请告诉我在这里应该遵循的方法。任何帮助将不胜感激。

这里是我的highcharts的脚本：

<script type="text/javascript">
$(function () {
    $('#container').highcharts({
        chart: {
            type: 'line',marginRight: 130,marginBottom: 25
        },title: {
            text: 'Monthly Average Temperature',x: -20 //center
        },subtitle: {
            text: 'Source: WorldClimate.com',x: -20
        },xAxis: {
            categories: ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec']
        },yAxis: {
            title: {
                text: 'Temperature (°C)'
            },plotLines: [{
                value: 0,width: 1,color: '#808080'
            }]
        },tooltip: {
            valueSuffix: '°C'
        },legend: {
            layout: 'vertical',align: 'right',verticalAlign: 'top',x: -10,y: 100,borderWidth: 0
        },series: [{
            name: 'Tokyo',data: [7.0,6.9,9.5,14.5,18.2,21.5,25.2,26.5,23.3,18.3,13.9,9.6]
        },{
            name: 'New York',data: [-0.2,0.8,5.7,11.3,17.0,22.0,24.8,24.1,20.1,14.1,8.6,2.5]
        },{
            name: 'Berlin',data: [-0.9,0.6,3.5,8.4,13.5,18.6,17.9,14.3,9.0,3.9,1.0]
        },{
            name: 'London',data: [3.9,4.2,8.5,11.9,15.2,16.6,14.2,10.3,6.6,4.8]
        }]
    });
});


    </script>

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);

    }
  }
});