Почему ng-click не вызывается в ie11 на модальном, но работает на той же структуре без модального?

Question

Я использую эту структуру в двух местах в моем приложении angularjs:

<article class="product-select col nde-webkit-box selected" ng-class="{selected: vm.selected()}" ng-click="vm.onClick($event)" ng-repeat="element in control.Elements" style="width:140px;" item-id="element.ID" nde-click="vm.onControlChange(element, control)">
<div class="border nde-height-box" data-toggle="popover" popover-trigger="mouseenter" data-placement="top" uib-popover="">
    <figure>
    <div class="nde-matrix-item-img bg-image" ng-style="vm.styles" style="background-image: url(abc.de); background-position: 0px -194px;"></div>
        <div ng-switch="vm.inputType">
            <!----><input ng-switch-when="radio" type="radio" id="444" ng-checked="vm.selected()" name="21545" ng-disabled="vm.disabled" checked="checked"><!---->
            <!---->
        </div>
        <span ng-bind-html="vm.label">Product</span>
    </figure>
</div>

Другое место внутри Uib-модала:

<div modal-render="true" tabindex="-1" role="dialog" class="modal fade in" uib-modal-animation-class="fade" modal-in-class="in" 
ng-style="{'z-index': 1050 + index*10, display: 'block'}" uib-modal-window="modal-window" index="0" animate="animate" modal-animation="true" style="z-index: 1050; display: block;">
<div class="modal-dialog" ng-class="size ? 'modal-' + size : ''"><div class="modal-content" uib-modal-transclude=""><nde-edit-product-family-modal edit-product-family-modal-data="vm.editProductFamilyModalData"><div class="nde-ng">

<article class="product-select col nde-webkit-box" ng-class="{selected: 
vm.selected()}" ng-click="vm.onClick($event)" ng-repeat="element in vm.selectProductFamilyData.Elements" item-id="element.ID" disabled="disabled" nde-click="vm.selectProductFamilyData.onSelectedFamilyChanged(element)">
<div class="border nde-height-box" data-toggle="popover" popover-trigger="mouseenter" data-placement="top" uib-popover="ABC">
    <figure>
    <div class="nde-matrix-item-img bg-image" ng-style="vm.styles" style="background-image: url(abc.de); background-position: 0px -194px;"></div>
        <div ng-switch="vm.inputType">
            <!----><input ng-switch-when="radio" type="radio" id="555" ng-checked="vm.selected()" name="24245" ng-disabled="vm.disabled"><!---->
            <!---->
        </div>
        <span ng-bind-html="vm.label">Super product</span>
    </figure>
</div>

Эти элементы ведут себя по-разному только в Internet Explorer 11. Щелчок ng (помещенный в тег article-html) не вызывается, когда вы точно нажимаете переключатель, он вызывается, когда вы нажимаете область вокруг переключателя. Единственное, что вы можете сделать - это двойной щелчок, тогда он вызывает все. У вас нет такого поведения, когда структура используется без модального вокруг нее, тогда работает один щелчок.

Я думаю, что это может быть проблема с z-индексом, приведенным здесь на модальной линии:

ng-style="{'z-index': 1050 + index*10, display: 'block'}

Возможно, элемент article находится не поверх переключателя в ie11, а во всех других браузерах.