How to make highcharts-ng horizontal bar chart responsive - highcharts

Question

I have worked with several type of highcharts-ng, and the horizontal bar chart seems to be special - I had hard time to make the chart width adapt to the screen size. To illustrate the problem, I created a jsfiddle. By default, it has a fixed size of 600px, instead of the whole available width. I tried various ways to adjust the width accordingly, but none of them works perfectly. One way is to use $window.onresize as shown in the code, but it doesn't work. However, if I put a Resize button which runs the same code, it does work. Why?
HTML:
<div ng-app="myapp">
<div ng-controller="myctrl">
<input ng-model="chart.title.text">
<button ng-click="resize()">Resize</button>
<highchart id="chart1" series="chart.series" title="chart.title" options="chart.options"></highchart>
</div>
</div>
JS:
var myapp = angular.module('myapp', ["highcharts-ng"]);
myapp.controller('myctrl', function($scope, $window) {
$scope.resize = function() {
$scope.chart.options.chart.width = $window.innerWidth;
}
$window.onresize = function() {
$scope.chart.options.chart.width = $window.innerWidth;
}
$scope.chart = {
options: {
chart: {
type: 'bar'
}
},
series: [{
data: [10, 15, 12, 8, 7]
}],
title: {
text: 'Hello'
}
}
});

Answer 1

this in window.onresize refers to the global window object which does not have the chart config object in opposite to $scope.toggleWidth in which this refers to the scope with the chart.
Chart config can be accessed like this:
$window.onresize = function () {
var chart = $scope.chart.options.chart;
if (chart.width === 400) {
chart.width = 800
} else {
chart.width = 400
}
$scope.$digest();
};
onresize you need to manually call $digest().
example: http://jsfiddle.net/wscqtdvo/