title: Create a highchart graphic using angular.js
body: <p>I've spent the last 4 hours trying to make this thing work. I'm very new with angular.js, jquery, highcharts and all that stuff and I can't find the way to fix this.</p>
  
  <p>What I'm trying to do is create a highchart graphic in a div. The json for the graphics came in the right way from the backend, so it isn't necessary to make any change to the json.</p>
  
  <p>So, I've done the following:</p>
  
  <p>First, in the html:</p>
  
  <pre><code>&lt;div ng-controller="ChartController"&gt;
    &lt;div class="chart-container" id="chartContainer"&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>And in order to gather the data, I've made the following:</p>
  
  <pre><code>var termomether = angular.module('termomether', [ 'ngResource' ]);
  
  termomether.factory('Chart', function($resource) {
    return $resource('/app/api/chart', {}, {
      query : {
        method : 'GET',
        params : {},
        isArray : true
      }
    });
  });
  
  termomether.controller('ChartController', function($scope, Chart) {
    $('#chartContainer').highcharts(Chart.query())
  });
  </code></pre>
  
  <p>And the result is that the graphic is displayed, but empty. It has the size that I'm expected to have but doesn't have the data, it shows an empty white box. </p>
  
  <p>If in this moment you are thinking that the problem is with the json, this maybe is going to make you think different. If I change the controller in the following form, the graphic is showed perfectly:</p>
  
  <pre><code>var termomether = angular.module('termomether', [ 'ngResource' ]);
  
  termomether.controller('ChartController', function($scope, $http) {
    $http.get('api/chart').success(function(items) {
      $(function() {
        $('#chartContainer').highcharts(items)
      }); 
    });
  });
  </code></pre>
  
  <p>Therefore... I don't have idea why it isn't working in the controller that use a factory and a resource</p>