<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>filter nested properties in angularjs</title>
  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular.min.js"></script>
  <script>
    var app = angular.module('myApp', []);
    app.controller('ngController', function($scope) {
      $scope.countries = [{
        "name": "USA",
        "category_id": 1,
        "locations": [{
          "cityId": 22,
          "regionId": 1
        }]
      }, {
        "name": "India",
        "category_id": 2,
        "locations": [{
          "cityId": 30,
          "regionId": 2
        }]
      }];

      $scope.search = function(shop) {
        if ($scope.Selected_CityId === undefined || $scope.Selected_CityId.length === 0) {
          return true;
        }

        var match = false;
        angular.forEach(shop.locations, function(location) {
          if (location.cityId === parseInt($scope.Selected_CityId)) {
            match = true;
          }
        });
        return match;
      };
    });
  </script>
</head>

<body ng-app="myApp">
  <div ng-controller="ngController">
    <h1>filter nested properties</h1>
    <input type="text" ng-model="Selected_CityId" />
    <div ng-repeat="country in countries | filter : search">
      {{country.name}} {{ country.locations }}
    </div>
      <div>
    <br><a href="http://www.code-sample.com/2014/09/angularjs-documentation.html">Click for more detail</a>
  </div>
  </div>
</body>
</html>
// Code goes here

/* Styles go here */