I have created template as below
<ion-header-bar class="bar-light bar-subheader bar bar-header item-input-inset">
<label class="item-input-wrapper">
<i class="icon ion-ios7-search placeholder-icon"></i>
<input type="search" ng-model="search" placeholder="select city...">
<button ng-if="search.length" class="customIcon button button-icon ion-close-circled input-button"></button>
</label>
<button class="button button-clear">Cancel</button>
</ion-header-bar>
my issue is when I put below code in button inside label it will not work but if I put same code in button outside label it works
ng-click="search=''"
The problem is that ngIf directive creates a new child scope, so search='' becomes local child scope property search which has nothing to do with parent scope search model you are after.
The simplest fix is to use ngShow instead which only hides button but deal with the same scope:
<button ng-show="search.length" ng-click="search=''" class="customIcon button button-icon ion-close-circled input-button"></button>
You could also overcome it with parent scope reference: ng-if="search.length" ng-click="$parent.search=''", but this is not recommended.
Thank you everybody for help. But I found solution, it turnout that button ng-click will not work inside the label, so I change label to div which start working every thing.