How to create a composite filter with two way binding?

I want to display a list of items in a table and allow users to filter the items using form controls.

My Problem
I am able to accomplish this when the controller first executes, but when I change the values of the inputs, the table doesn't re-render with the correct data.

My Question
How can I make my table filter based on new values in the form fields?

Live Example


var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
    $scope.travelerFilter = 2;
    $scope.groupFilter = "A";

    $scope.records = [
        { leadName: "Jesse", travelerCount: 1, group: "A"},
        { leadName: "John", travelerCount: 1, group: "B"},
        { leadName: "James", travelerCount: 2, group: "A"},
        { leadName: "Bill", travelerCount: 2, group: "B"}

    var travelerCountFilter = function(record) {
        return record.travelerCount >= $scope.travelerFilter;

    var groupFilter = function(record) {
        return === $scope.groupFilter;

    $scope.filteredRecords = _.chain($scope.records)


<!doctype html>
<html ng-app="plunker" >
  <script src=""></script>
  <script src="//"></script>
  <script src="app.js"></script>
<body ng-controller="MainCtrl">

  <p>Show records with at least <input type="number" ng-model="travelerFilter" /> travelers.</p>
  <p>Group <input type="text" ng-model="groupFilter" /></p>

      <tr ng-repeat="record in filteredRecords">



angular can automatically two-way-bind everything for you without the need for filters:


$scope.filteredRecords = function() {
  return $scope.records.filter(function(record, i) {
    return record.travelerCount === $scope.travelerFilter && === $scope.groupFilter;


<tr ng-repeat="record in filteredRecords()">

See here for a live example:


You can specify the filter as part of the ng-repeat, i.e.:

<tr ng-repeat="record in records | filter:{group:groupFilter} | filter:{travelerCount:travelerFilter}">

See here for a live version:


Recent Questions

Top Questions

Home Tags Terms of Service Privacy Policy DMCA Contact Us

©2020 All rights reserved.