Angularjs multiple highcharts

我试图在angularjs应用程序中初始化多个highchart。问题是只有第一个图表是初始化的…有人能帮帮我吗?

这是我的指令:

app.directive('widget', function() {
return {
restrict: 'AC',
scope: { widgetModel: '=' },
replace: true,
template:
  '<li id="{{widgetModel.class}}" chartType="{{widgetModel.chartType}}" data-col="{{widgetModel.col}}" data-row="{{widgetModel.row}}" data-sizex="{{widgetModel.sizex}}" data-sizey="{{widgetModel.sizey}}" style="width:200px; height:100px;">'+
    '{{widgetModel.text}}, ({{widgetModel.row}},{{widgetModel.col}})'+
  '</li>',
link: function(scope, element, attrs) {
    var chart1 = new Highcharts.Chart({
      chart: {
        renderTo: attrs.id,
        type: attrs.chartType,
        height: attrs.chartheight,
        animation: false
      },
      xAxis: {
        categories: [12,13,14,15],
        labels: {
          step: attrs.chartStep
        }
      },
      yAxis: {
        title: {
          text: ''
        }
      },
      series: [{
        data: [1,2,3,4],
        name: "ciccio"
      }]
    });
}
  };
});

我创建了一个提琴:http://jsfiddle.net/Tropicalista/mtKJ8/33/