Ion-list made my filter not run?


#1

My problem is that when I use ion-list to create a list with data returned from AngularFire using Firebase, I can’t apply my filter. The filter doesn’t work and doesn’t show any error.
This is my code
Javascript:

//get all categories
  var catRef = new Firebase('https://angnews123.firebaseio.com/email/cat');
  $scope.cats = $firebase(catRef).$asArray();
  console.log($scope.cats);

HTML:

<ion-side-menus>

  <ion-pane ion-side-menu-content>
    <ion-nav-bar class="bar-stable nav-title-slide-ios7">
      <ion-nav-back-button class="button-clear"><i class="icon ion-ios7-arrow-back"></i> Back</ion-nav-back-button>
    </ion-nav-bar>
    <ion-nav-view name="menuContent" animation="slide-left-right"></ion-nav-view>
  </ion-pane>

  <ion-side-menu side="left">
    <header class="bar bar-header bar-stable">
      <h1 class="title">Categories</h1>
    </header>
    <ion-content class="has-header">
      <ion-list>     
        <ion-item nav-clear>
          <input type="text" ng-model="query" placeholder="Search a category...">
        </ion-item>   
        <ion-item ng-repeat="cat in cats | filter:query" nav-clear menu-close href="#/app/playlists/{{cat.$id}}">
          {{cat.name}}
        </ion-item>
      </ion-list>
    </ion-content>
  </ion-side-menu>
</ion-side-menus>

If anyone knows about this, please help me to fix it.


#2

Have the same problem.


#3

I also have the same problem. If you replace <ion-list>, <ion-item> with <div class=“list”>, <div class=“item”> the exact same code works. I really don’t want to loose ion-list features though.