BROKEN Angular Filter

HTML

<script src="https://code.angularjs.org/1.3.10/angular.js"></script>
<div ng-app="myApp">
    <div ng-controller="TestCtrl">
        
        <nav>
            <a href="javascript:{}" ng-click="area='one';" ng-class="{'active': area==='one'}">Area 1</a>
            <a href="javascript:{}" ng-click="area='two';" ng-class="{'active': area==='two'}">Area 2</a>
            <a href="javascript:{}" ng-click="area='three';" ng-class="{'active': area==='three'}">Area 3</a>
        </nav>
        <br><br>
        
        <span>OUTSIDE</span>
        <input type="text" ng-model="filterText">
        
        <div class="area" 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 class="area" ng-show="area==='two'">
            <h3>Area 2!</h3>
            <p>Stuff here...</p>
        </div>
        <div class="area" ng-show="area==='three'">
            <h3>Area 3!</h3>
            <p>Stuff here...</p>
        </div>
    </div>
</div>

CSS

nav a{
    padding: 5px;
    background-color: #EEE;
}
nav a.active{
    background-color: blue;
    color: #FFF;
}

.area{
    margin-top: 10px;
    padding: 5px;
    border: 1px solid #CCC;
}

JavaScript

var myApp = angular.module("myApp", []);
myApp.controller("TestCtrl", ["$scope", function ($scope) {
    $scope.area="one";
    $scope.filterText = 'wat';
    
    $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;
    };
        
}]);