My 1st directive, was challenging, saving the neat tricks used in here, grabbing attribute data, and waiting for data from the servers and passing them to external function. Awesome angular!!

abacus-charts.directive.js

// ==================== Gainers Directive =======================
appEngine.directive('agCharts', function($chartDefaults) {
    return {
        restrict: 'E',
        // <ag-charts chart-id="[[co_gain.id ]]" options="[[ co_gain.options ]]"></ag-charts>
        scope: {
            chartId: '@',
            chartType: '@',
            years: '@',
            months: '@'
        },
        transclude: true,
        replace: true,
        template: '<div id="[[ chartId ]]" style="height: 350px; min-width: 500px; width: 100%" class="abacus-chart"></div>',
        controller: ['$scope', '$http', 'stockCharts', function($scope, $http, stockCharts) {
            // get the options
            $scope.options = $.extend(true, {}, stockCharts.config());

            $scope.getChartData = function(id, time) {
                $http({
                    method: 'GET',
                    url: 'http://41.242.1.252/api/companies/' + id + '/history',
                    params: time
                }).success(function(JSON) {
                    $scope.chart_data = _.map(JSON.data, function(indices) {
                        return {
                            open: parseFloat(indices.open),
                            high: parseFloat(indices.high),
                            low: parseFloat(indices.low),
                            date: Date.parse(indices.DATE),
                            close: parseFloat(indices.close),
                            vwap: parseFloat(indices.vwap.toFixed(2)),
                            volume: parseInt(indices.volume),
                        }
                    }).sort(function(a, b) {
                        return a.date - b.date;
                    }).filter(function(dataitem) {
                        return (dataitem.close !== 0 && dataitem.low !== 0 && dataitem.high !== 0 && dataitem.open !== 0);
                    });
                });
            }
        }],
        // $scope ===  chart
        link: function(scope, El, attr) {
            scope.getChartData(attr.chartId, {
                years: attr.years,
                months: attr.months
            });
            // scope.options = options;
            console.log("========== Linking " + attr.chartId + " ^_^ ============", El[0]);
            // console.log(JSON && JSON.parse(attr.timespan) || $.parseJSON(attr.timespan));
            //.match(/\d/g, '')); //.split(','));
            // console.log("SERIES 0 -------- ", scope.options.series[0]);
            // scope.options.useHighStocks = true;

            // var chartData;
            scope.$watch('chart_data', function(new_data) {
                if (new_data) {

                    var upload = {
                        one: [],
                        two: []
                    };
                    // console.log("<==================== NEW_DATA =====================>", new_data);
                    // console.log(scope.options.series[0]);
                    // scope.options.series = [options.series[0], options.series[1]];
                    angular.forEach(scope.chart_data, function(data) {
                        // console.info([data.date, data.volume])
                        upload.one.push([data.date, data.volume]);
                        upload.two.push([data.date, data.open, data.high, data.low, data.close]);
                    });
                    console.log("================= Before injection", upload);

                    createStockChart(scope.options, El, upload)
                }
            });


        }
    }
    // return plotGainers;
});

var createStockChart = function(options, el, data) {
    options.chart.renderTo = el[0];
    $(el[0]).parent().on('resize', function(el) {
        chart.reflow();
    })
    console.log("XXXXXXX", $(el[0]).parent().width())

    options.chart.width = parseInt($(el[0]).parent().width()) * 0.93;
    options.series[0].data = data.one;
    options.series[1].data = data.two;
    var chart = new Highcharts.StockChart(options);
    setTimeout(function() {
        chart.reflow()
    }, 1000);
}