Define a directive

chart.html

<highchart value="chartData" type="line" width="800" height="400">
</highchart>

high-chart-directive-spec.js

define(['angular',
        'directives/directives',
        'directives/high-chart-directive'], function() {
    describe("highcharts directive", function() {
        var element;
        var scope;

        var chartData = {"title":{"text":"Trend"},"xAxis":{"categories":["2013-12-20","2013-12-21","2013-12-22","2013-12-23","2013-12-24","2013-12-25"]},"series":[{"name":"trend","data":[32,42,36,30,52,22]}]};

        beforeEach(function() {
            module("directives");
            inject(function($compile, $rootScope) {
                 scope = $rootScope;
                 scope.chartData = chartData;
                 element = angular.element("<highchart value='chartData' type='line' width='800' height='400'></highchart>");
                 $compile(element)($rootScope);
            });
        });

        it("should render chart", function() {
            scope.$digest();
            expect(element.find(".highcharts-container").length).toEqual(1);
        });
    });
});

high-chart-directive.js

define(['directives/directives', 'jquery', 'highcharts'], function(directives, jquery, highcharts) {
    directives.directive('highchart', function() {
        return {
            restrict: 'E',
            template: '<div></div>',
            scope: {
                chartData: "=value"
            },

            transclude:true,
            replace: true,

            link: function (scope, element, attrs) {
              var chartsDefaults = {
                chart: {
                  renderTo: element[0],
                  type: attrs.type || null,
                  height: attrs.height || null,
                  width: attrs.width || null
                }
              };
              
              //Update when charts data changes
              scope.$watch(function() { return scope.chartData; }, function(value) {
                if(!value) return;
                var deepCopy = true;
                var newSettings = {};
                
                jquery.extend(deepCopy, newSettings, chartsDefaults, scope.chartData);

                new Highcharts.Chart(newSettings);
              });
            }
        };
    });
});

root-controller.js

define(['controllers/controllers'], function(controllers) {
    controllers.controller('RootController', ['$scope', function($scope) {
        $scope.isHidden = true;

        $scope.toggleIt = function() {
            $scope.isHidden = !$scope.isHidden; 
        };

        $scope.title = "This is my chart";

        $scope.chartData = 
        {"title":{"text":"Trend"},"xAxis":{"categories":["2013-12-20","2013-12-21","2013-12-22","2013-12-23","2013-12-24","2013-12-25"]},"series":[{"name":"trend","data":[32,42,36,30,52,22]}]};
    }]);

});