javascript - angularjs で angular-gridster ディレクティブと highcharts-ng ディレクティブを一緒に使用する方法

Question

angularjs-gridster ( https://github.com/ManifestWebDesign/angular-gridster ) を higharts-ng ディレクティブ ( https://github.com/pablojim/highcharts-ng/blob/master/README.md )と共に使用しています。

グリッド セル内でこれらのハイチャートを生成しようとしています。私の問題は、グラフ ドロワー関数を $timeout サービスに配置しても、ハイチャートがデフォルトの幅と高さ (600px * 400px) を占めていることです。コードは次のとおりです。

HTML :

<div class="graph-list" gridster="gridsterOpts">
  <ul>
    <li gridster-item="graph.grid" class="graph-set" ng-repeat="graph in graphs | orderBy: 'number'">
      <highchart id="{{'graph' + graph.number}}" class="graph" config="graph.config"></highchart>
    </li>
  </ul>
</div>

JS :

// 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(); 
});

グリッドセルの幅と高さでウォッチを作成しようとしましたが、変化はありません。デフォルトで親の幅と高さを取るが、それが起こらないことをhighcharts-ngのドキュメントで読んだので、graph.configオプションでハイチャートの幅と高さを明示的に指定していません。考えられる問題を教えてください。

angularjs-gridster プラグインは、highcharts ディレクティブがそれ自体をレンダリングできるようになる前に、グリッドの幅と高さを設定できないようです。助けてください。