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

Question

I have a simple AngularJS page with different sections that I show & hide when links are clicked. One of these areas has a repeated list that can be filtered.

When the section containing the list is shows/hidden with ng-show or ng-hide it behaves normally. When ng-if is used, the list cannot be filtered.

Demos

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

---

Sample 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>

Sample Angular

$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;
};

Athiste

It's not the filter, it's the input (well, the ngModel of the input, anyway). Hence duplicate of: https://mcmap.net/q/125953/-angularjs-ng-model-doesn-39-t-work-inside-ng-if . (To prove this to yourself, you can move the input outside of the ngIf, your example will work as expected). A working modification of yours would use ng-model="$parent.filterText", jsfiddle.net/Lmbfdxvs/10 – Rupiah

so nesting HTML inside ng-if creates a new scope, but nesting inside ng-show does not? – Athiste

Yep. ngIf transcludes the contents, creating a new scope every time it is created (as in, if it becomes false, the scope is destroyed; when it becomes true again a new scope is created). docs.angularjs.org/api/ng/directive/ngIf . nsShow and ngHide basically just toggle/animate classed. – Rupiah

Answer 1

I don't hold a Masters degree on the subject of Prototypal Inheritance myself but I'll try my best to explain it shortly (there's a ton of resources on the subject);

• Number
• String
• Boolean
• null
• undefined
• Symbol (as of ES6)

are considered primitives (MDN).

Now - when you 'inherit' a primitive from your parent scope, what is actually happening is that the child scope 'mirrors' or 'shadows' the given primitive value. As such, you can think of it as a copy of the above.

That is roughly the nature of primitives in the context of Prototypal Inheritance.

This can clearly be observed in a modified version of your broken fiddle.

Try playing with the two inputs and you can see that there is a connection of the two values when you only touch the outside input (i.e. the child value 'shadows' the parent value). But once you touch the inside input, the values disconnect from one another.

---

The recommended way to get around this is to use a reference to a property on your model (I say model, but really it's just a JS object) that is defined further up the prototype chain;

$parentScope.obj = { filterText: '' };

ng-model="obj.filterText"

Now you should be good to go with ngIf, ngSwitch, ngRepeat to name a few of the angular supplied directives that create a new scope.

Resources on the subject

• understanding scopes @ angular
• presentation by misko on the subject
• stackoverflow answer by Mark Rajcok
• the dot @egghead.io
• google search 'dot ng model'

Kuhl