JSFiddle - React, Tailwind, and code Playground

HTML

<div ng-app="myapp" ng-controller="MyController">
  <div ng-repeat="state in validStates">
    <input type="checkbox" ng-click="toggleState(state)">{{ state }}</input>
  </div>
  <div>Search: {{ selectedMetrics | json }}</div>
  <table>
    <tr ng-repeat="metric in metrics | stateFilter:selectedStates">
      <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.selectedStates = [];

  $scope.toggleState = function(state) {
      if ($scope.selectedStates.indexOf(state) >= 0) {
          $scope.selectedStates = $scope.selectedStates.filter(function(s) { s != state });
      } else {
          $scope.selectedStates.push(state);
      }
  }

  $scope.validStates = [
    'working', 'broken', 'hosed'
  ];
}]);

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