AngularJS multiple ng-model filter

You can search name 'tiba', but area 'tiba' can not search.

name codename area
sato foo tokyo
suzuki bar tiba
tiba baz saitama
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<div ng-controller="Ctrl">
  <h1>AngularJS multiple ng-model filter</h1>
  <p>You can search <b>name</b> 'tiba', but <b>area</b> 'tiba' can not search.</p>
  <p><input type="text" ng-model="query"></p>
  <table class="table table-striped table-bordered">
    <tr>
      <th>name</th>
      <th>codename</th>
      <th>area</th>
    </tr>
    <tr ng-repeat="item in items | filterMultiple:query">
      <td>{{item.name}}</td>
      <td>{{item.codename}}</td>
      <td>{{item.area}}</td>
    </tr>
  </table>
</div>
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
var app = angular.module('app', []);
app.controller('Ctrl', ['$scope', function($scope) {
  $scope.items = [
    {'name': 'sato', 'codename': 'foo', 'area': 'tokyo'},
    {'name': 'suzuki', 'codename': 'bar', 'area': 'tiba'},
    {'name': 'tiba', 'codename': 'baz', 'area': 'saitama'}
  ];
}]);
app.filter('filterMultiple', [function() {
  return function (data, query) {
    if (query === undefined) return data;
    var results = [];
    angular.forEach(data, function(val) {
      if ((val.name).indexOf(query) > -1 || (val.codename).indexOf(query) > -1) {
        results.push(val);
      }
    });
    return results;
  }
}]);