Trying to set filteredItemsCollection from ng-repeat inside ng-if prevents parent scope from inheriting the value

Question

I've got an ng-repeat nested within an ng-if block:

<div ng-repeat="item in filteredItems = (fullItemCollection | filter:searchQuery)>{{item}}</div>

When I try to access $scope.filteredItems from my controller, I don't see the filteredItems as they should be. I'm assuming it's something to do with the scope that's created by ng-if, but I'm pretty sure I've used similar setups before without any problems.

Made a jsfiddle as a demo: http://jsfiddle.net/gLdeM/

Also made a jsfiddle to show that this behavior indeed works without the ng-if: http://jsfiddle.net/LgSAL/1/

note: I know plnkr's all the rage, but for some reason our firewall is blocking saving on plnkr :(

Answer 1

I forgot that javascript inheritance is primarily meant for javascript objects. If I nest the full and filtered arrays in an outer object, it works.

$scope.items = {
    filtered: [],
    full: ['red', 'blue', 'green', 'yellow', 'blue-green', 'yellow-green', 'orange']
};

See updated jsfiddle

Answer 2

The variable filteredItems is just locally available within the ng-repeat. If you want to filter the second list in the same way as the first list use the same filter condition:

<div ng-repeat="item in filteredItems = (fullItems | filter:searchQuery)">
  {{ item }}
</div>

http://jsfiddle.net/gLdeM/1/