title: Why don't AngularJS Filters work when inside an ng-if?
body: <p>I have a simple AngularJS page with different sections that I show &amp; hide when links are clicked.  One of these areas has a repeated list that can be filtered.</p>
  
  <p>When the section containing the list is shows/hidden with <code>ng-show</code> or <code>ng-hide</code> it behaves normally.  When <code>ng-if</code> is used, the list cannot be filtered.</p>
  
  <p><strong>Demos</strong></p>
  
  <ul>
  <li><a href="http://jsfiddle.net/Lmbfdxvs/8/" rel="noreferrer">This version <strong>does not</strong> work due to the use of <code>ng-if</code></a></li>
  <li><a href="http://jsfiddle.net/Lmbfdxvs/9/" rel="noreferrer">This version <strong>does</strong> work due to the use of <code>ng-show</code></a></li>
  </ul>
  
  <hr>
  
  <p><strong>Sample HTML</strong></p>
  
  <pre><code>&lt;nav&gt;
      &lt;a href="javascript:{}" ng-click="area='one';"&gt;Area 1&lt;/a&gt;
      &lt;a href="javascript:{}" ng-click="area='two';"&gt;Area 2&lt;/a&gt;
  &lt;/nav&gt;
  
  &lt;div ng-if="area==='one'"&gt;
      &lt;h3&gt;Area 1!&lt;/h3&gt;
      &lt;input type="text" placeholder="filter list..." ng-model="filterText" /&gt;
      &lt;ul&gt;
         &lt;li ng-repeat="item in list | filter: listFilter"&gt;
             {{item.id}} - {{item.name}}
         &lt;/li&gt;
      &lt;/ul&gt;
  &lt;/div&gt;
  
  &lt;div ng-if="area==='two'"&gt;
      &lt;h3&gt;Area 2!&lt;/h3&gt;
      &lt;p&gt;Stuff here...&lt;/p&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>Sample Angular</strong></p>
  
  <pre><code>$scope.area="one";
  $scope.filterText="";
  
  $scope.list = [
      {id:1, name:"banana"},
      {id:2, name:"apple"},
      {id:3, name:"orange"},
      {id:4, name:"pear"},
      {id:5, name:"apricot"}
  ];
  
  $scope.listFilter = function(item){
      var term = $scope.filterText.trim().toLowerCase();
      return item.id.toString().indexOf(term) &gt; -1 || item.name.indexOf(term) &gt; -1;
  };
  </code></pre>