How to add another filter onto AngularJS search filter?

Question

I have a search filter set up and working using a search input element:

<input placeholder="Search" type="text" ng-model="search.$"/>

And

<tr ng-repeat="person in people | filter:search:strict">
  <td>{{ person.name }}</td>
<!-- etc --!>

This works correctly but I want to add buttons that will be able to filter all people by the value of an attribute without having to type it in, and keeping the search filter working as is. The controller and scope details are:

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

FilteringApp.controller('FilteringCtrl', ['$scope', '$http', '$timeout', function($scope, $http, $timeout) {
    $scope.people = [{"name":"Billy","job":"CEO","stress":"high"},
                     {"name":"Mandy","job":"CTO","stress":"high"},
                     {"name":"Susan","job":"CFO","stress":"high"},
                     {"name":"Michael","job":"CMO","stress":"low"}];
}]);

Here is a demo plunkr

Answer 1

You can just add filters to the search by specifying search.stress as the ng-model of other input fields with the values you want..

Example using radio buttons

  <label><input type="radio" value="" ng-model="search.stress">any stress</label><br/>
  <label><input type="radio" value="low" ng-model="search.stress">low stress only</label><br/>
  <label><input type="radio" value="high" ng-model="search.stress">high stress only</label>

You can now filter for stress level in addition to the free text search

Demo at http://plnkr.co/edit/1MBRoq