title: connecting angularJS to plotly
body: <p>So I want to use angularJS to get data from a server and plot the data using Plotly. I am running a server in the background. The HTML I am using is shown below. I think it is pretty straight forward. </p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
      &lt;title&gt;Testign Plotly&lt;/title&gt;
      &lt;script type="text/javascript" src='plotly.min.js'&gt;&lt;/script&gt;
      &lt;script type="text/javascript" src='jquery.min.js'&gt;&lt;/script&gt;
      &lt;script type="text/javascript" src='angular.min.js'&gt;&lt;/script&gt;
      &lt;script type="text/javascript" src='plotApp.js'&gt;&lt;/script&gt;
  &lt;/head&gt;
  &lt;body ng-app='myApp'&gt;
  &lt;div id="graph" style="width:600px;height:250px;"&gt;&lt;/div&gt;
  &lt;script type="text/javascript" ng-controller='plotXY'&gt;
  
      // var data = [{
      //     x:[1,2,3,4],
      //     y:[5,3,6,12],
      // }];
  
      Plotly.plot( $('#graph')[0], {{data}}  , {margin: {t:0}});
  &lt;/script&gt;
  &lt;hr&gt;&lt;div ng-controller='plotXY'&gt;{{data}}&lt;/div&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>I have the angularJS script <code>plotApp.js</code> as shown below, also very simple ...</p>
  
  <pre><code>var app = angular.module('myApp', []);
  
  app.controller('plotXY', function($scope, $http){
  
      $scope.data = {};
  
      $scope.refresh = function(){
          $http.get('http://localhost:8080/data').success(function(data){
              $scope.data = {};
              for(k in data){$scope.data[k] = data[k].map(Number);}
              $scope.data = [$scope.data];
          });
      };
  
      $scope.refresh();
  });
  </code></pre>
  
  <p>Now, The compiled HTML for this (saved from the browser) is shown below ...</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;&lt;head&gt;
  &lt;meta http-equiv="content-type" content="text/html; charset=windows-1252"&gt;&lt;style type="text/css"&gt;@charset "UTF-8";[ng\:cloak],[ng-cloak],[data-ng-cloak],[x-ng-cloak],.ng-cloak,.x-ng-cloak,.ng-hide:not(.ng-hide-animate){display:none !important;}ng\:form{display:block;}.ng-animate-shim{visibility:hidden;}.ng-anchor{position:absolute;}&lt;/style&gt;
      &lt;title&gt;Testign Plotly&lt;/title&gt;
      &lt;script type="text/javascript" src="Testign%20Plotly_files/plotly.js"&gt;&lt;/script&gt;&lt;style&gt;&lt;/style&gt;
      &lt;script type="text/javascript" src="Testign%20Plotly_files/jquery.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript" src="Testign%20Plotly_files/angular.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript" src="Testign%20Plotly_files/plotApp.js"&gt;&lt;/script&gt;
  &lt;/head&gt;
  &lt;body class="ng-scope" ng-app="myApp"&gt;
  &lt;div id="graph" style="width:600px;height:250px;"&gt;&lt;/div&gt;
  &lt;script class="ng-scope" type="text/javascript" ng-controller="plotXY"&gt;
  
      // var data = [{
      //     x:[1,2,3,4],
      //     y:[5,3,6,12],
      // }];
  
      Plotly.plot( $('#graph')[0], {{data}}  , {margin: {t:0}});
  &lt;/script&gt;
  &lt;hr&gt;&lt;div class="ng-scope ng-binding" ng-controller="plotXY"&gt;[{"y":[1.26642e-14,2.8044e-14,6.1484e-14,1.33457e-13],"x":[-10,-9,-8,-7]}]&lt;/div&gt;
  &lt;/body&gt;&lt;/html&gt;
  </code></pre>
  
  <p>As you can tell, the portion within the <code>div</code> gets updates with the right data. However, that within the script doesn't! </p>
  
  <p>Just so you know, If I use the <code>data</code> variable (the one that is commented out), I am able to see the plot. So Plotly is working.</p>
  
  <p>I want the client to pull data from the server and have plotly display it. I can do it if I create the entire page from the server and send it over. However, I think that this way is much better. However, for some reason, I dont seem to be able to connect the data source in Plotly, to that in angularJS. I would really appreciate some help ...</p>