Override side menu header with search box bar

ionic-v1
1

Hi,
I am using a side menu for navigation. In some pages I want to add a search box. The problem is that I have to put the search box inside “ion-nav-buttons” tag to make it viewable which apparently breaks ng-model binding of that search box:

<ion-view>
    <ion-nav-title>Customers
</ion-nav-title>
    <ion-nav-buttons side="right" >

        <div class="item-input-inset"  ng-show="showSearch" style="left: 30px;">
            <label class="item-input-wrapper">
                <i class="icon ion-ios-search placeholder-icon"></i>
                <input type="search" placeholder="Search" ng-model="customerName">
            </label>
            <button class="button button-clear" ng-click="toggleShowSearch();">
                Cancel
            </button>
        </div>

        <button class="button button-icon button-clear ion-android-search " ng-click="toggleShowSearch()" ng-show="!showSearch" ></button>
        <button class=" button button-icon button-clear ion-android-add " ng-show="!showSearch" ng-click="editCustomer(0)"></button>
        <!--i class=" button button-icon button-clear ion-android-more-vertical" ng-show="!showSearch"></i-->
    </ion-nav-buttons>
    <ion-content class="has-header">
        <div class="list">
            <div ng-repeat="customer in customers | filter: customerName">
                    {{customer.Name}}
            </div>
                </div>
            </div>
        </div>

    </ion-content>

</ion-view>

Any ideas?!