title: Filter multiple object properties together in AngularJS
body: <p>I have an object in my controller</p>
  
  <pre><code>var app = angular.module('myApp', []);
  app.controller('myCtrl', function($scope) {
  $scope.names = [{"Name":"Alfreds Futterkiste","City":"Berlin","Country":"Germany"}, 
  {"Name":"Ana Trujillo Emparedados y helados","City":"México D.F.","Country":"Mexico"}, 
  {"Name":"Antonio Moreno Taquería","City":"México D.F.","Country":"Mexico"},
   {"Name":"Around the Horn","City":"London","Country":"UK"}, 
  {"Name":"B's Beverages","City":"London","Country":"UK"}];
  });
  </code></pre>
  
  <p>I want to filter <code>Name</code>, <code>Country</code> at the same time.</p>
  
  <pre><code>Name:&lt;input type="text" ng-model="name"&gt; 
  Country:&lt;input type="text" ng-model="country"&gt; &lt;br&gt;
   &lt;table&gt;
  &lt;tr ng-repeat="x in names | filter: name | filter: country"&gt;
     &lt;td&gt;{{ x.Name }}&lt;/td&gt;
     &lt;td&gt;{{ x.Country }}&lt;/td&gt;
  &lt;/tr&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>But both input boxes apply filter on both columns.</p>
  
  <p>How to set the <code>name</code> input only to the first column and the <code>country</code> input, only to the second column?</p>