Unable to trigger ng-click on a button when you click the button contents

Question

I have some buttons in an html template, controlled by an AngularJS directive. The buttons ng-click event doesn't fire when you click on the buttons contents (icon and span), clicking anywhere on the padding or blank space works fine though...

This is only an issue in Safari.
I am using AngualrJS 1.4.
The icon is in an i element using classes to find the icon I want from a font file.

<button ng-if="form.awesome" class="button awesome" ng-click="chooseAwesome()">
    <i class="icon icon-awesome"></i>
    <span>Awesome</span>
</button>

Clicking in the green or orange area works fine. The image on the right, clicking on the element in blue, doesn't trigger the click.

I have tried messing with the z-index and I have looked to see if the icon and span elements are capturing the click and preventing it from being passed to the button (which as far as I can tell they are not...)

Answer 1

I've managed to get it working using z-index. The icon and the span needed to have the position set for the z-index to have any effect.

I added the following to my .scss file.

.awesome {
  .icon {
    position: relative;
    z-index: 1;
  }
  span {
    position: relative;
    z-index: 1;
  }
}

I'm not sure what was capturing the click event but this seems to have fixed it in my specific case.