JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.6/angular.min.js"></script>
<div >
    <div data-ng-controller="myCtrl">

        
        <ul >
            <li data-ng-repeat="item in testValue=(values | filter:filterIds())"> 
                <code>#{{item.id}}</code> Item
            </li>
        </ul>
        
        <p ng-show="!testValue.length">no vals with this filter</p>
        <button ng-click="loadNewFilter()"> filter now</button>
    </div>
    

</div>

JavaScript

var app = angular.module('m', []);

app.controller('myCtrl', function ($scope) {
    $scope.values = [{
        id: 1
    }, {
        id: 2
    }, {
        id: 3
    }, {
        id: 4
    }, {
        id: 5
    }, {
        id: 6
    }];
$scope.testValue = [];
    $scope.filter = [1,2,3,4,5,6];
    alert($scope.testValue.length);
    $scope.filterIds = function (ids) {
	        return function (item) {
	        	var filter = $scope.filter;

		        	 return filter.indexOf(item.id) !== -1;       	
            }
     }
    
    $scope.loadNewFilter = function (){
    alert($scope.testValue.length);
        $scope.filter = [-1];
        $scope.$apply();
    }
    

    
});