title: Displaying chart using angularjs-nvd3-directives doesn't work
body: <p>So I made a simple Angular - nvd3 project. I'm using liveData.example from this <a href="https://github.com/angularjs-nvd3-directives/angularjs-nvd3-directives" rel="nofollow">Github</a> Library (angularjs-nvd3-directives). I improve it a little bit in order to use my REST API.</p>
  
  <p>This is my REST API:</p>
  
  <pre><code>http://amr2.mybluemix.net/getmet/list
  </code></pre>
  
  <p>And this is my code:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;meta charset="utf-8"&gt;
  &lt;html&gt;
  &lt;head&gt;
      &lt;title&gt;Angular.js nvd3.js Live Data Chart Example&lt;/title&gt;
      &lt;meta http-equiv="content-type" content="text/html; charset=UTF8"&gt;
      &lt;script src="js/angular.js"&gt;&lt;/script&gt;
      &lt;script src="js/d3.js"&gt;&lt;/script&gt;
      &lt;script src="js/nv.d3.js"&gt;&lt;/script&gt;
      &lt;script src="js/moment.js"&gt;&lt;/script&gt;
      &lt;script src="dist/angularjs-nvd3-directives.js"&gt;&lt;/script&gt;
      &lt;link rel="stylesheet" href="nv.d3.css"/&gt;
      &lt;script&gt;
          var app = angular.module("nvd3TestApp", ['nvd3ChartDirectives']);
  
          app.config(['$httpProvider', function($httpProvider) {
              $httpProvider.defaults.useXDomain = true;
              delete $httpProvider.defaults.headers.common['X-Requested-With'];
              }
          ]);
  
  
          app.factory('DataMeterDetail', ['$http', function($http){
                  var getData = function(_id, _rev){
                      return $http({
                          method: 'JSONP',
                          url: 'http://amr2.mybluemix.net/getmet/list'
                      });
                  }
                  return{
                      getDataDetail: function(_id, _rev){return getData(_id, _rev);}
                  }
          }]);
  
          app.factory('DataMeter', function(){
             return {
                 cityId: 0,
                 units: 'imperial'
             }
          });
  
          function ExampleCtrl($scope, DataMeterDetail, DataMeter){
              function fetchData(){
                  DataMeterDetail.getDataDetail(5506956, 'imperial')
                          .success(function(response){
                              console.log(response);
                              var dta = [{key:"100010001_20082015_0", values:[]}];
                                  dta[0].values = response.list.map(function(d){
                                  return [d._id, d._rev];
                              });
                              $scope.exampleData = dta;
                          });
              }
  
              fetchData();
  
              $scope.xAxisTickFormatFunction = function(){
                  return function(d){
                      return d3.time.format('%x-%H:%M')(new Date(d*1000));
                  }
              }
  
  
          }
      &lt;/script&gt;
      &lt;style&gt;
          div{
              font-family: sans-serif;
          }
      &lt;/style&gt;
  &lt;/head&gt;
  &lt;body ng-app='nvd3TestApp'&gt;
  
  &lt;div ng-controller="ExampleCtrl"&gt;
  
      &lt;input type="text" ng-model="cityName"/&gt;
  
      &lt;div&gt;Example Data&lt;/div&gt; &lt;/div&gt;
      &lt;nvd3-line-chart
              data="exampleData"
              id="exampleId"
              width="800"
              height="400"
              showXAxis="true"
              showYAxis="true"
              tooltips="true"
              interactive="true"
              xAxisTickFormat="xAxisTickFormatFunction()"
              margin="{left:100,top:20,bottom:20,right:10}"
              yAxisLabel="Temperature (F)"
              xAxisLabel="Date"
              &gt;
          &lt;svg&gt;&lt;/svg&gt;
      &lt;/nvd3-line-chart&gt;
  &lt;/div&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Now the code doesn't work. Can you guys show me whats wrong with this code?
  Thanks in advance.</p>