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>

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 selectedStates = [];
    angular.forEach(validStates, function (state) {
      if (state.filterFor) selectedStates.push(state.name);
    });

    return list.filter(function (item) {
      return selectedStates.length === 0 || selectedStates.indexOf(item.state) !== -1;
    });
 };
});