Function parameter the same in button ng-click

Question

I have two buttons that are using the same ng-click with different params.

<label class="item item-input">
  <button ng-click="takePicture(true)">Save Settings</button>
  <button ng-click="takePicture(false)">Choose from Gallery</button>
</label>

No matter what I do, the buttons pass the same param as what is in the first function call.

With a simple controller function for testing, the same param gets logged. In this case, it is true for both.

$scope.takePicture = function(my_param) {
  console.log(my_param);
}

These seems to happen only in Ionic, not with standard Angular. Here is a CodePen for a working example.

http://codepen.io/anon/pen/JYBKVQ

Edit: Per the solution below, I've included the source of the problem in the code excerpt above. Curse you <label>, curse you to heck!

Answer 1

It is an issue with nesting the buttons inside a label. If you remove the label it works as expected: http://codepen.io/anon/pen/ojMzLj

<div class="list list-inset">
    <h3>Profile Picture</h3>
    <button class="button button-block button-calm" ng-click="takePicture(true)">Save Settings</button>
    <button class="button button-block button-calm" ng-click="takePicture(false)">Choose from Gallery</button>
    <label class="item item-input">
        <input type="text" placeholder="Circle Color" ng-model="data.color">
    </label>
    <label class="item item-input">
        <input type="text" placeholder="Stroke Color" ng-model="data.stroke">
    </label>
</div>

Answer 2

Indeed the issue is with the label as @DenimChicken pointed out, other tags work as expected.

I took a look at: http://www.w3schools.com/tags/tag_label.asp

I also tested some other cases and it turns out, the label is passing clicks to the first button it finds, in fact it ALWAYS calls the first ng-click, no matter which one you click. The label find the first intractable element, and stops the other events from propagating. This can be changed with the "for" attribute.

When the label is targeted, this happens, the target always gets clicked.

<label for="false" >
        <h3>Profile Picture</h3>
        <button class="button button-block button-calm" ng-click="takePicture(true)">Save Settings</button>
        <button id="false" class="button button-block button-calm" ng-click="takePicture(false)">Choose from Gallery</button>
</label>