Why don't AngularJS Filters work when inside an ng-if? -

I have a simple finger page with different sections that I show & amp; Hide when clicking the link In one of these fields there is a repeated list that can be filtered.

When the section with the list is ng-show or ng-hide it behaves normally when ng-if If used, the list can not be filtered.

Demo

---

Sample HTML

  & lt; Nav> & Lt; A href = "javascript: {}" ng-click = "area = 'one';" & Gt; Region 1 & lt; / A & gt; & Lt; A href = "javascript: {}" ng-click = "area = 'two';" & Gt; Region 2 & lt; / A & gt; & Lt; / Neo & 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" /> & Lt; Ul & gt; & Lt; Li ng-repeat = "list in the list | filter: list filter" & 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; The content here ... & lt; / P & gt; & Lt; / Div & gt;  

Angular of the sample

  $ 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 word = $ scope.filterText.trim (.) ToLowerCase (); return item.id.toString () IndexOf (word)> -1. Item.name.indexOf (word)> 1;}