angularjs + highcharts with custom directive (not highcharts-ng)

<!DOCTYPE html>
<html lang="en">

  <head>
    <script data-require="angular.js@*" data-semver="1.2.5" src="http://code.angularjs.org/1.2.5/angular.js"></script>
    <script data-require="jquery@*" data-semver="2.0.3" src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
    <script data-require="highcharts@*" data-semver="2.3.5" src="//cdnjs.cloudflare.com/ajax/libs/highcharts/2.3.5/highcharts.js"></script>
    <script src="chartDirective.js"></script>
    <script src="dashboardController.js"></script>
    <script src="app.js"></script>
    <meta charset="utf-8"> 
  </head>

  <body ng-app="app">
    <div ng-controller="dashboardController">
      <chart config="chartConfig"></chart>
    </div>
  </body>
</html>

angular.module('app', [])
.directive('chart', chartDirective)
.controller('dashboardController', dashboardController);

var chartDirective = function () {
    return {
        restrict: 'E',
        replace: true,
        template: '<div></div>',
        scope: {
            config: '='
        },
        link: function (scope, element, attrs) {
            var chart;
            var process = function () {
                var defaultOptions = {
                    chart: { renderTo: element[0] },
                };
                var config = angular.extend(defaultOptions, scope.config);
                chart = new Highcharts.Chart(config);
            };
            process();
            scope.$watch("config.series", function (loading) {
                process();
            });
            scope.$watch("config.loading", function (loading) {
                if (!chart) {
                    return;
                }
                if (loading) {
                    chart.showLoading();
                } else {
                    chart.hideLoading();
                }
            });
        }
    };
};

function dashboardController($scope, $http) {
    this.$scope = $scope;
    $scope.chartConfig = {
            xAxis: {
                categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 
                             'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
            },
                        title: {
                text: 'USD to EUR exchange rate from 2006 through 2008'
            },            subtitle: {
                text: document.ontouchstart === undefined ?
                    'Click and drag in the plot area to zoom in' :
                    'Pinch the chart to zoom in'
            },
            yAxis: { title: { text: 'Temperature (Celsius)' } },
            tooltip: { valueSuffix: ' celsius' },
            legend: { align: 'center', verticalAlign: 'bottom', borderWidth: 0 },
               plotOptions: {
                area: {
                    fillColor: {
                        linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1},
                        stops: [
                            [0, Highcharts.getOptions().colors[0]],
                            [1, Highcharts.Color(Highcharts.getOptions().colors[0]).setOpacity(0).get('rgba')]
                        ]
                    },
                    marker: {
                        radius: 2
                    },
                    lineWidth: 1,
                    states: {
                        hover: {
                            lineWidth: 1
                        }
                    },
                    threshold: null
                }
            },
            series: [{
              type:'area',
                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]
            }]
    };
}