I've written an angular controller that crashes Internet Explorer 11 consistently, but works as expected in Chrome, Firefox and Opera.
There's nothing too complicated here, it's displaying values from an array in a table row, using a checkbox to switch between displaying all the values, or a subset of the array.
Click the box twice to trigger the crash
<div ng-app="monthsApp">
<div ng-controller="MonthsCtrl as monthsCtrl">
<table style="border-collapse: collapse;">
<colgroup>
<col span="{{monthsCtrl.getSpan()}}" />
</colgroup>
<thead>
<tr>
<th>
<div>
switch between six and twelve months:
<input id="agings-open-balances-matrix-state" ng-model="monthsCtrl.sixOrTwelve" type="checkbox" ng-click="monthsCtrl.updateDisplay()">
</div>
</th>
</tr>
</thead>
<tbody>
<tr>
<td>Months</td>
<td ng-repeat="month in monthsCtrl.monthsToDisplay">{{month}}</td>
</tr>
</tbody>
</table>
</div>
</div>
<script>
var monthsApp = angular.module('monthsApp', []);
monthsApp.controller('MonthsCtrl', function() {
var vm = this;
var months = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
vm.sixOrTwelve = false; //false = display six month; true = display 12 months
vm.updateDisplay = function() {
vm.monthsToDisplay = [];
if (vm.sixOrTwelve) {
vm.monthsToDisplay = months;
} else {
vm.monthsToDisplay = months.slice(6);
}
}
vm.getSpan = function() {
return (vm.sixOrTwelve) ? 13 : 7;
}
vm.updateDisplay();
});
</script>
I've created a plunkr to demonstrate this here: http://plnkr.co/RTIhnU
Removing the "colgroup" tag, or the "border-collapse" value in the table style attribute to resolve the issue.
Is this a known issue, and if so is there a workaround or fix?