title: Resize Highcharts chart in Angular UI Modal
body: <p><a href="http://plnkr.co/edit/NbZ1nCEnXXlOO7Ky0wSx" rel="nofollow">In this plunk</a> I have a Highcharts chart within an Angular UI Modal. The modal can be resized (implemented with jQuery UI resize).</p>
  
  <p>The objective is to resize the chart to 100% width and height of the modal whenever the modal is resized. I defined 100% width and height in the Highcharts container but this doesn't work. Any ideas?</p>
  
  <p>HTML:</p>
  
  <pre><code>  &lt;script type="text/ng-template" id="myModalContent.html"&gt;
          &lt;div id="container" style="min-width:300px;width:100%; height:100%"&gt;&lt;/div&gt;
    &lt;/script&gt;
  
    &lt;button type="button" class="btn btn-default" ng-click="open()"&gt;Open me!&lt;/button&gt; 
  </code></pre>
  
  <p>Javascript</p>
  
  <pre><code>    var app = angular.module("app", ['ui.bootstrap']);
      app.controller("ctl", function($scope,$uibModal,$timeout) {
  
        var modalInstance;
        $scope.open = function () {
          modalInstance = $uibModal.open({
                animation: false,
                windowClass: 'the-modal',
                templateUrl: 'myModalContent.html'
              });
  
              $timeout(function(){
  
                  $('.modal-content').resizable({
                        handles: "all"
                  }); 
  
                  plotChart();
  
              },10);
  
          };
  
          var plotChart = function(){
  
                $('#container').highcharts({
              title: {
                  text: 'Monthly Average Temperature',
                  x: -20 //center
              },
              subtitle: {
                  text: 'Source: WorldClimate.com',
                  x: -20
              },
              xAxis: {
                  categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
                      'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
              },
              yAxis: {
                  title: {
                      text: 'Temperature (°C)'
                  },
                  plotLines: [{
                      value: 0,
                      width: 1,
                      color: '#808080'
                  }]
              },
              tooltip: {
                  valueSuffix: '°C'
              },
              legend: {
                  layout: 'vertical',
                  align: 'right',
                  verticalAlign: 'middle',
                  borderWidth: 0
              },
              series: [{
                  name: 'Tokyo',
                  data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6]
              }, {
                  name: 'New York',
                  data: [-0.2, 0.8, 5.7, 11.3, 17.0, 22.0, 24.8, 24.1, 20.1, 14.1, 8.6, 2.5]
              }, {
                  name: 'Berlin',
                  data: [-0.9, 0.6, 3.5, 8.4, 13.5, 17.0, 18.6, 17.9, 14.3, 9.0, 3.9, 1.0]
              }, {
                  name: 'London',
                  data: [3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8]
              }]
          });
  
          };
  
      });
  </code></pre>