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


I have the following code from a tutorial:

<ion-header-bar class="bar-light bar-subheader">
<input type="search"
       placeholder="Filter contacts..."
       ng-focus="searchFocused = true"
       ng-blur="searchFocused = false"
<button ng-if="search.length"
        class="button button-icon ion-android-close input-button"
<div class="list">
    <a class="item my-item"
       collection-repeat="item in getContacts()"
       ng-href="{{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="{{55 + ($index % 10)}}">
        {{item.letter || (item.first_name+' '+item.last_name)}}

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?


Keep whole code in

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


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.