Button inside the label with the input does not trigger ng-click - angularjs

Question

That's my code:
<label class="item item-input " style="height: 10%" ng-click="publish()">
<input type="text" placeholder="Title" ng-model="title">
<i ng-click="publishBlog()" class="button button-clear icon ion-paper-airplane padding-right"></i>
</label>
The "publish()" can be triggered,but not the "publishBlog()".The ionic will put the icon into the .Does the ionic cause it?

Answer 1

within "label" tag your click event will not work, because label is overriding your button click.
so, use DIV instead of label , that will work fine.

Answer 2

As Hardy said, you will have to use div instead of label. But you will be required to use $event.stopPropagation(); to make sure only publishBlog() gets called. Without $event.stopPropagation();, both the functions will get called.
So, here's a sample implementation:
<ion-content class="padding" ng-controller="my">
<div class="item item-input " style="height: 10%" ng-click="publish($event)">
<input type="text" placeholder="Title" ng-model="title">
<i ng-click="publishBlog($event)" class="button button-clear icon ion-paper-airplane padding-right"></i>
</div>
</ion-content>
And your controller:
.controller("my", function($scope){
$scope.publish = function($event) {
alert("title");
};
$scope.publishBlog = function ($event) {
$event.stopPropagation();
alert("icon");
};
});
Here's a demo: http://play.ionic.io/app/1b82ce25ca44