AngularJS Custom directive which uses Plotly.JS to render a line graph.

<!DOCTYPE html>
<html ng-app="graphPlotterDemoApp">
<head lang="en">
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Plotly Graph Plotter Directive for AngularJS - Demo</title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body ng-controller="graphPlotterDemoCtrl">

<!-- This is where we are going to put our custom directive -->
<line-plot graph-plots=graphPlots></line-plot>

<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js"></script>
<script src="https://d14fo0winaifog.cloudfront.net/plotly-basic.js"></script>
<script src="graph-plotter.js"></script>
<script src="app.js"></script>
</body>
</html>

// Code goes here

/* Styles go here */

/**
 * Created by ArunaTebel on 9/4/2015.
 */

var graphPlotterDemoApp = angular.module('graphPlotterDemoApp', ['graphPlotter']);

graphPlotterDemoApp.controller('graphPlotterDemoCtrl', ['$scope', function ($scope) {
    var trace1 = {
        x: [1, 2, 3, 4],
        y: [10, 15, 13, 17],
        type: 'scatter'
    };

    var trace2 = {
        x: [1, 2, 3, 4],
        y: [16, 5, 11, 9],
        type: 'scatter'
    };

    var trace3 = {
        x: [1, 2, 3, 4],
        y: [23, 4, 2, 6],
        type: 'scatter'
    };

    var trace4 = {
        x: [1, 2, 3, 4],
        y: [9, 11, 3, 12],
        type: 'scatter'
    };
    $scope.graphPlots = [trace1, trace2, trace3, trace4];
}]);

/**
 * Created by ArunaTebel on 9/4/2015.
 */

var graphPlotter = angular.module('graphPlotter', []);

graphPlotter.directive('linePlot', [function () {
    function linkFunc(scope, element, attrs) {
        scope.$watch('graphPlots', function (plots) {
            Plotly.newPlot(element[0], plots);
        });
    }

    return {
        link: linkFunc
    };
}]);