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 class="li li-info" data-ng-repeat="${values}"> 
                <h4>#{{item.id}} Item</h4> 
            </li>
        </ul>
        
        <p ng-show="!testValue.length">no vals with this filter</p>
        <button ng-click="loadNewFilter()"> filter now</button>
    </div>
    

</div>

CSS

ul{
  list-style-type:none;  
}
.li {
  padding: 5px;
  margin: 5px 0;
  border: 1px solid #eee;
  border-left-width: 5px;
  border-radius: 3px;
}

.li-info {
  border-left-color: #1b809e;
}

.li h4 {
  margin-top: 0;
  margin-bottom: 3px;
}

.li-info h4 {
  color: #1b809e;
}

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,5];
        $scope.$apply();
    }
    

    
});