Ionic search not working if not in <ion-sub-header>

ionic-v1
1

I have the following code from a tutorial:

<ion-header-bar class="bar-light bar-subheader">
<input type="search"
       placeholder="Filter contacts..."
       ng-model="search"
       ng-focus="searchFocused = true"
       ng-blur="searchFocused = false"
       ng-change="scrollTop()">
<button ng-if="search.length"
        class="button button-icon ion-android-close input-button"
        ng-click="clearSearch()">
</button>
</ion-header-bar>
<ion-content>
<div class="list">
    <a class="item my-item"
       collection-repeat="item in getContacts()"
       collection-item-height="getItemHeight(item)"
       collection-item-width="getItemWidth(item)"
       ng-href="https://www.google.com/#q={{item.first_name + '+' + item.last_name}}"
       ng-style="{'line-height': getItemHeight(item) + 'px'}"
       ng-class="{'item-divider': item.isLetter}">
        <img ng-if="!item.isLetter" ng-src="http://placekitten.com/60/{{55 + ($index % 10)}}">
        {{item.letter || (item.first_name+' '+item.last_name)}}
    </a>
</div>
</ion-content>

I wanted to transfer the position of the search field to be inside the ion-content but when I do this (replacing ion-header-bar with div), the field still shows but the filtering stops working. I always get all the records instead. What is different with positioning the field inside the element?

2

Keep whole code in

         <ion-nav view>
           <ion-view>
              //Your code
            </ion-view>
         </ion-nav view>
3

it’s already in there. I just didn’t include it when I copied it to this question. I tried what you suggested, I also tried using ion-nav-view instead and removing ion-nav-view altogether and just retain the ion-view element but still no luck.