JSFiddle - React, Tailwind, and code Playground

HTML

<div ng-app="myapp" ng-controller="MyController">
  <div ng-repeat="state in validStates">
    <input type="checkbox" ng-model="state.filterFor">{{ state.name }}
  </div>
  <div>Search: {{ selectedMetrics | json }}</div>
  <table>
    <tr ng-repeat="metric in metrics | stateFilter:validStates">
      <td>{{ metric.name }}</td>
      <td>-</td>
      <td>{{ metric.state }}</td>at</tr>
  </table>
</div>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.3/angular.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>

JavaScript

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

myapp.controller('MyController', ['$scope', function ($scope) {
  $scope.metrics = [
    {name: "thing1", state: "working"}, 
    {name: "thing2", state: "broken"}, 
    {name: "thing3", state: "hosed"},
    {name: "thing4", state: "broken"}
  ];

  $scope.validStates = [
    {name: 'working', filterFor: false},
    {name: 'broken',  filterFor: false}, 
    {name: 'hosed', filterFor: false}
  ];
}]);

myapp.filter('stateFilter', function () {
  return function (list, validStates) {
    var filterForStates = $.map(validStates, function(state) { if (state.filterFor) return state.name });
    
    if (!filterForStates.length) return list;
    else return $.grep(list, function(item) { return $.inArray(item.state, filterForStates) > -1 });
 };
});