title: Filter fields using input and drop down in angularJS
body: <p>I'm trying to filter through a json using ng-repeat.
  But as per requirement I need to use an input field and a drop down to filter through the data.</p>
  
  <p>Below is my code:</p>
  
  <p>Html:
        
  </p>
  
  <pre><code>&lt;input ng-model="queryFilter" placeholder="Search"/&gt;&lt;br&gt;
  &lt;select ng-model="stateFilter"&gt;
     &lt;option value="0" selected&gt;Select State&lt;/option&gt;
     &lt;option value="City1 State1"&gt;City1 State1&lt;/option&gt;
     &lt;option value="City2 State2"&gt;City2 State2&lt;/option&gt;
     &lt;option value="City3 State3"&gt;City3 State3&lt;/option&gt;           
     &lt;option value="City4 State4"&gt;City4 State4&lt;/option&gt;   
  &lt;/select&gt;
  
  &lt;div style="background:#eee;" ng-repeat="emp in empList | filter:query"&gt;
      &lt;p style="margin-top:10px;"&gt;{{emp.organisation}}&lt;/p&gt;
      &lt;p&gt;{{emp.number}}&lt;/p&gt;
      &lt;p&gt;{{emp.location.city}} {{emp.location.state}}&lt;/p&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><br>
   </p>
  
  <p>Javascript:</p>
  
  <pre><code>var testApp = angular.module("Testing",[]);
  testApp.controller("empCtrl",function($scope){
  $scope.queryFilter = '';
  $scope.stateFilter = '';
  
  $scope.query = function (emp) {
  return emp.organisation.indexOf($scope.queryFilter)!=-1 || 
      emp.number.indexOf($scope.queryFilter)!=-1 || 
      emp.organisation.toLowerCase().indexOf($scope.queryFilter)!=-1 || 
      emp.number.toLowerCase().indexOf($scope.queryFilter)!=-1  || 
      (emp.location.city+" "+emp.location.state).indexOf($scope.stateFilter)!=-1 ;
  }
  $scope.empList = [
      {"organisation":"Organisation1","number":"7ZDG54","location":{"city":"City1","state":"State1"}},
      {"organisation":"Organisation2","number":"9D4F3G","location":{"city":"City2","state":"State2"}},
      {"organisation":"Organisation3","number":"1AS2S3","location":{"city":"City3", "state":"State3"}},
      {"organisation":"Organisation4","number":"4A5T7D","location":{"city":"City3","state":"State4"}},
  ];
  $scope.orderProp="name";
  });
  </code></pre>
  
  <p><a href="http://jsfiddle.net/hpmq3snt/" rel="nofollow">JSFiddle:</a> </p>
  
  <p>I can filter using the input box but drop down doesn't work. </p>
  
  <p>Note: The location is made up of two parameters (city and state) and a state may have multiple cities.</p>
  
  <p>Any help is appreciated.
  Thanks.</p>