JSFiddle - React, Tailwind, and code Playground

HTML

<div ng-app="myapp" ng-controller="MyController">
    <input type="checkbox" ng-model="search.working" >working
    <input type="checkbox" ng-model="search.broken" >broken
    <input type="checkbox" ng-model="search.hosed" >hosed
    <div>Search: {{ search | json }}</div>
<table>
  <tr ng-repeat="metric in metrics | MyFilter:search">
      <td> {{ metric.name }}</td>
      <td> - </td>
      <td> {{ metric.state }}</td>
  </tr>
</table>  
</div>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.3/angular.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: "thing2", state:"hosed"} ,
        {name: "thing2", state:"broken"}  
    ];
}]);

myapp.filter('MyFilter', function() {
    return function( list, searchobj ) {
        return list.filter( function( item ) {
            var passes_filters = false,
                any_filter_set = false;

            for ( state in searchobj ) {
                any_filter_set = any_filter_set || searchobj[ state ];
                passes_filters = passes_filters || (searchobj[ state ] && item.state == state);
            }
            return !any_filter_set || passes_filters;
        } );
    };
} );