title: associating plotly graphs and angular JS data
body: <p>I am trying to create a plotly.js plot with angularJS.</p>
  
  <p>This is the app.js ...</p>
  
  <pre><code>var app = angular.module('graphPlotterDemoApp', []);
  
  app.controller('PlotCtrl1', function ($scope) {
      $scope.data = [{
          x: [1, 2, 3, 4],
          y: [10, 15, 12, 17]}];
  });
  
  app.directive('linePlot', function () {
  
      // Create a link function
      function linkFunc(scope, element, attrs) {
          scope.$watch('data', function (plots) {
              var layout = {
                  'width': attrs.width,
                  'height': attrs.height,
                  'pad':'0',
                  'margin': { 't': 0, 'b':20, 'l':40, 'r':0 },
              };
  
              Plotly.newPlot(element[0], plots, layout);
          });
      }
  
      // Return this function for linking ...
      return {
          link: linkFunc
      };
  });
  </code></pre>
  
  <p>And I have this html</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head lang="en"&gt;
      &lt;title&gt;Plotly Graph Plotter Directive for AngularJS - Demo&lt;/title&gt;
      &lt;script src="jquery.min.js"&gt;&lt;/script&gt;
      &lt;script src="angular.min.js"&gt;&lt;/script&gt;
      &lt;script src="plotly.min.js"&gt;&lt;/script&gt;
      &lt;script src="app.js"&gt;&lt;/script&gt;
  &lt;/head&gt;
  &lt;body ng-app="graphPlotterDemoApp"&gt;
  
  before div = PlotCtrl1
  &lt;div  ng-controller="PlotCtrl1"&gt;
      {{data}}
      &lt;table&gt;
      &lt;thead&gt;&lt;tr&gt;&lt;td&gt;x&lt;/td&gt;&lt;td&gt;y&lt;/td&gt;&lt;/tr&gt;&lt;/thead&gt;
      &lt;tbody ng-repeat='x1 in data[0].x'&gt;
          &lt;tr&gt;
              &lt;td&gt;&lt;input type='number' ng-model='data[0].x[$index]'&gt;&lt;/td&gt;
              &lt;td&gt;&lt;input type='number' ng-model='data[0].y[$index]'&gt;&lt;/td&gt;
          &lt;/tr&gt;    
      &lt;/tbody&gt;
      &lt;/table&gt;
  
      &lt;line-plot width=300, height=200&gt;
  &lt;/div&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>The plot appears, but it turns out that when I am changing the value within the input boxes, although the data actually changes, the plot does not change. Is there a way of fixing this?</p>