title: how to use angular-gridster and highcharts-ng directives together in angularjs
body: <p>I am using angularjs-gridster (<a href="https://github.com/ManifestWebDesign/angular-gridster" rel="nofollow">https://github.com/ManifestWebDesign/angular-gridster</a>) with higharts-ng directive (<a href="https://github.com/pablojim/highcharts-ng/blob/master/README.md" rel="nofollow">https://github.com/pablojim/highcharts-ng/blob/master/README.md</a>)</p>
  
  <p>I am trying to generate these highcharts inside the grid cells. My problem is that the highcharts are occupying their default width and height (600px * 400px) even when i place my graph drawer function in a $timeout service. Here's the code:</p>
  
  <p><strong>HTML</strong>:</p>
  
  <pre><code>&lt;div class="graph-list" gridster="gridsterOpts"&gt;
    &lt;ul&gt;
      &lt;li gridster-item="graph.grid" class="graph-set" ng-repeat="graph in graphs | orderBy: 'number'"&gt;
        &lt;highchart id="{{'graph' + graph.number}}" class="graph" config="graph.config"&gt;&lt;/highchart&gt;
      &lt;/li&gt;
    &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>JS</strong>:</p>
  
  <pre><code>// inside the graph-list div controller 
  $scope.gridsterOpts = {
      colums: 4,
      rowHeight: 240,
      margins: [10,10],
      outerMargin: false,
      draggable: {
        enabled: false // whether dragging items is supported
      }
  };
  $scope.graphs = {}; //
  $scope.somefunction(){ /* this function populates the graphs object */ }; 
  function drawGraphs(){ /* this function populates the graph.config object by looping through all the graph objects */ }
  $timeout(function(){
      drawGraphs(); 
  });
  </code></pre>
  
  <p>I have tried creating watch on the grid-cell width and height but it shows no change. I have not given the highchart width and height explicitly in the graph.config options because I read in the highcharts-ng documentation that it takes the parent width and height by default but its not happening. Can anyone guide me what could be the possible problem.</p>
  
  <p>Seems to me that the angularjs-gridster plugin is not able to set the grid width and height before the highcharts directive is able to render itself. Please help.</p>