为什么AngularJS过滤器在ng-if内部不起作用？

当使用ng-show或ng-hide显示/隐藏包含列表的部分时,它的行为正常.使用ng-if时,无法过滤列表.

演示

> This version does not work due to the use of ng-if
> This version does work due to the use of ng-show

示例HTML

<nav>
    <a href="javascript:{}" ng-click="area='one';">Area 1</a>
    <a href="javascript:{}" ng-click="area='two';">Area 2</a>
</nav>

<div ng-if="area==='one'">
    <h3>Area 1!</h3>
    <input type="text" placeholder="filter list..." ng-model="filterText" />
    <ul>
       <li ng-repeat="item in list | filter: listFilter">
           {{item.id}} - {{item.name}}
       </li>
    </ul>
</div>

<div ng-if="area==='two'">
    <h3>Area 2!</h3>
    <p>Stuff here...</p>
</div>

示例角度

$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) > -1 || item.name.indexOf(term) > -1;
};