HighCharts with AngularJS and draggable chart line

I wanted to merge highcharts with angularjs and draggable line markers. after searching for a while, i came up with this.

by serebrov

HTML

<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.12/angular.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="https://rawgithub.com/pablojim/highcharts-ng/master/src/highcharts-ng.js"></script>
<script src="https://rawgithub.com/highslide-software/draggable-points/master/draggable-points.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<!-- REF http://jsfiddle.net/highcharts/AyUbx/ draggable REF http://jsfiddle.net/pablojim/Cp73s/ highcharts-ng -->
<div ng-app="myapp">
    <div ng-controller="myctrl">
        <highchart id="container" config="highchartsNG" style="height: 300px"></highchart>
        <div class="well row">
            <div class="col-xs-3">
                <button ng-click="randomize()">Randomize Series</button>
                <button ng-click="randomize(true)">Randomize History</button>
            </div>
            <div ng-bind="drag" class="col-xs-3"></div>
            <div ng-bind="drop" class="col-xs-3"></div>
        </div>
    </div>
</div>

JavaScript

//See External Resources for external resources
var myapp = angular.module('myapp', ["highcharts-ng"]);

myapp.controller('myctrl', function ($scope) {
    $scope.drag = 'drag feedback';
    $scope.drop = 'drop feedback';

    $scope.randomize = function (onlyHistory) {
        var seriesArray = $scope.highchartsNG.series
        for (i in seriesArray[0].data) {
            var random = Math.floor(Math.random() * 250);
            seriesArray[0].data[i] = random;
            if (!onlyHistory) seriesArray[1].data[i] = random;
        }
    };

    $scope.highchartsNG = {
        options: {
            chart: {
                type: 'spline'
            },
            plotOptions: {
                series: {
                    cursor: 'ns-resize',
                    point: {
                        events: {
                            drag: function (e) {
                                $scope.drag = this.series.name + ' = ' + Highcharts.numberFormat(e.newY, 2);
                                $scope.$apply();
                            },
                            drop: function () {
                                $scope.drop = this.series.name + ' = ' + Highcharts.numberFormat(this.y, 2);
                                $scope.$apply();
                            }
                        }
                    },
                    stickyTracking: false
                },
                column: {
                    stacking: 'normal'
                }
            },

            tooltip: {
                yDecimals: 2
            },

        },

        xAxis: {
            categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
        },

        series: [{
            data: [0, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4],
            name: 'History',
            draggableY: false,
            dashStyle: 'dash'
        }, {
            data: [0, 71.5, 106.4, 129.2, 144.0, 176.0,...