title: Flotcharts not rendering with angularjs
body: <p>I am having issues rendering Flotcharts with data populated from an AngularJS (v1.2.5) service call. When the data is hard-coded, the charts render as expected but not when assigned the value from a $resource call (console logging shows "undefined" as the value).</p>
  
  <p>The odd thing is that the same variable I use to populate the chart data is displayed in the view and works fine which makes me think this could be some sort of race condition or scoping issue.</p>
  
  <p>I have tried assigning the the $scope variables as a result of resolved promises without success to remedy race conditions as well as tried things such as $scope.$apply() from the chart directive.</p>
  
  <p>Below are code excerpts from my application. Any help is appreciated. Thank you.</p>
  
  <p>HTML wrapper:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html data-ng-app="app" data-ng-controller="app"&gt;
      &lt;head&gt;
          &lt;title&gt;FlotChart Example&lt;/title&gt;
      &lt;/head&gt;
  
      &lt;body&gt;
          &lt;main data-ng-view&gt;&lt;/main&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Template from Overview route:</p>
  
  <pre><code>&lt;div class="chart-title"&gt;{{getCount.count}} Total Transactions&lt;/div&gt;
  &lt;div id="deposits" data-chart="pie" data-flot-chart data-ng-model="model" data-ng-controller="OverviewCtrl"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>Main Module ("app"):</p>
  
  <pre><code>;(function (angular) {
      'use strict';
  
      angular.module('app', ['ngRoute', 'ngResource', 'ngTouch', 'services.Localization', 'Login', 'Overview'])
          .config(['$routeProvider', function ($routeProvider) {
              $routeProvider
              .when('/', {
                  templateUrl: 'views/login.html',
                  controller: 'LoginCtrl'
              })
              .when('/overview', {
                  templateUrl: 'views/overview.html',
                  controller: 'OverviewCtrl'
              })
              .otherwise({
                  redirectTo: '/'
              });
          }])
  
          .controller('App', ['$rootScope', 'Localize', function ($rootScope, Localize) {
              // initialize localization
              $rootScope.labels = Localize.get();
          }]);
  }(angular));
  </code></pre>
  
  <p>Overview Controller (used in charts and view):</p>
  
  <pre><code>;(function (angular) {
      'use strict';
  
      angular.module('Overview', ['services.DepositsSvc'])
  
          .controller('OverviewCtrl', ['$rootScope', '$scope', 'DepositCount', 'DepositCountGET', function ($rootScope, $scope, DepositCount, DepositCountGET) {
  
              $scope.getCount = DepositCount.get();
  
              $scope.getGETCount = DepositCountGET.get();
  
              $scope.model = {};
  
              $scope.model.data = [
                  {
                      label: $rootScope.labels.gets,
                      data: $scope.getGETCount.count,
                      color: "#e4d672"
                  },
                  {
                      label: $rootScope.labels.puts,
                      data: $scope.getCount.count,
                      color: "#c2cfeb"
                  }
              ];
  
              $scope.model.options = {
                  series: {
                      pie: {
                          show: true,
                          radius: 1,
                          label: {
                              radius: 2/3,
                              formatter: function (label, series) {
                                  return '&lt;div class="pie"&gt;' + label + ': ' +
                                      series.data[0][1] + '&lt;br&gt;(' + Math.round(series.percent) + '%)&lt;/div&gt;';
                              }
                          }
                      }
                  },
                  legend: {
                      show: false
                  }
              };
          }]);
  }(angular));
  </code></pre>
  
  <p>Services (output from both calls is { count: number }):</p>
  
  <pre><code>;(function (angular) {
      'use strict';
  
      angular.module('services.DepositsSvc', ['ngResource', 'ngRoute'])
  
          .factory('DepositCount', ['$resource', function ($resource) {
              return $resource('/rest/deposits/count', {}, {
                  query: { method: 'GET', params: {}, isArray: true }
              });
          }])
  
          .factory('DepositCountGET', ['$resource', function ($resource) {
              return $resource('/rest/deposits/countgetdeposits', {}, {
                  query: { method: 'GET', params: {}, isArray: true }
              });
          }]);
  }(angular));
  </code></pre>
  
  <p>Charts directive:</p>
  
  <pre><code>;(function (angular, $) {
      'use strict';
  
      angular.module('directives.FlotCharts', [])
  
          .directive('flotChart', function () {
              return {
                  restrict: 'EA',
                  controller: ['$scope', '$attrs', function ($scope, $attrs) {
                      var plotid = '#' + $attrs.id,
                          model = $scope[$attrs.ngModel];
  
                      $scope.$watch('model', function (x) {
                          $.plot(plotid, x.data, x.options);
                      });
                  }]
              };
          });
  }(angular, jQuery));
  </code></pre>