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 values | filter:filterIds()"> <code>#{{item.id}}</code> Item</li>
            <li class="no-items">There are no matching items.</li>
        </ul>
        <p ng-show="!values.length">no vals with this filter</p>
        <button ng-click="loadNewFilter()">filter now</button>
    </div>
</div>

CSS

li + .no-items {
    display: none;
}

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.filter = [1, 2, 3, 4, 5, 6];

    $scope.filterIds = function (ids) {
        return function (item) {
            var filter = $scope.filter;
            return filter.indexOf(item.id) !== -1;
        }
    }

    $scope.loadNewFilter = function () {
        $scope.filter = [-1];
        $scope.$apply();
    }
});