My main question is: does optgroup not function properly in IE?
The Plnkr code works fine in Chrome but encounters issues in IE 10. I'm trying to find a solution that will work across both browsers. Is this a known problem? In Chrome, I can expand/collapse the groups but in IE 10, it doesn't work. Is there any workaround for this issue?
Check out the Outgroup Expand/Collapse Selection here
<!DOCTYPE html>
<html ng-app="test">
<head>
<script data-require="<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="b8d9d6dfcdd4d9ca96d2cbf889968c">\[email protected]\</a>" data-semver="1.4.1" src="https://code.angularjs.org/1.4.1/angular.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body ng-controller="MainCtrl">
<select multiple class="box">
<optgroup ng-click="clickOptGroup(key);" ng-repeat="(key,value) in data" label="{{value.label}}">
<option ng-mousedown="mouseDown()" ng-mouseup="mouseUp()" ng-click="$event.stopPropagation();" ng-show="value.expanded" ng-repeat="id in value.ids">{{id}}</option>
</optgroup>
</select>
</body>
</html>