child button element is getting called on click on parent element - html

Question

I am trying out the Ionic app. I have the following simple snippet:
<ion-content padding="true" >
<label class="item item-input item-stacked-label">
<button ng-click="clickMe()">ClickMe</button>
</br>
<div class="input-label">Test Label</div>
</label>
</ion-content>
Which gives the following UI:
When I am clicking outside of the ClickMe button, ClickMe button is pushed up and called the clickMe().
Please help me to understand the reason behind this.

Answer 1

That is the property of a label that:
When a LABEL element receives focus, it passes the focus on to its
associated control.
If you want to prevent it, you can write a directive:
myApp.directive('preventClick', function() {
return {
link : function(scope, element, attrs) {
elemenet.on('click', function(e) {
e.preventDefault();
});
}
}
});
And apply it to the label
<label class="item item-input item-stacked-label" prevent-click>
<button ng-click="clickMe()">ClickMe</button>
</br>
<div class="input-label">Test Label</div>
</label>

Answer 2

Don't use label for that. Use any other element.
<div class="item item-input item-stacked-label">
<button ng-click="clickMe()">ClickMe</button>
</br>
<div class="input-label">Test Label</div>
</div>