How to properly insert Highcharts charts inside ng-grid?

Question

A Highchart chart is configured like this:

{
  columnDefs: [{field: 'chart', cellTemplate: '<div spark-line spark-line-data="{{grid.getCellValue(row, col)}}"></div>'}],
  data: [{chart: [1, 2, 3, 4]}...]
}

Then the directive to display the chart:

myApp.directive('sparkLine', function(){
        return{
            template: '<div></div>',
            link: function(scope, element, attrs){
                    Highcharts.sparkLine(element[0].firstElementChild, {
                        series: [{data: eval(attrs.sparkLineData)}]
            });
        };
}

The graphs are correctly showing in the table. The problem is that rows are being recycled when scrolling; the spark-line-data attribute is accordingly modified but the directive does not recreates the chart with the new data.

I have tried to use $observe on the attribute to recreate the chart on every change. This works but all charts are recreated what adds a prohibitive overhead to the scroll.

Any idea? I am open to new approaches that work better for the ng-grid case.