how to filter typeahead on basis of a particular dropdown value using Angular JS
<p>My requirement is that I have to filter input JSON data on basis of a value in one drop down means if dropdown value is "agency1" then I can show values of  only that JSON object  having "agency 1" value in "agency" key. </p>

<p>My JSON is this-</p>

<pre><code> $scope.myAgencies= [



  {
    "agency": "Agency1",
    "category" : "Plan",
    "name" : "ABC plan8",
    "type" : "BHC Plan"
  },
  {
    "agency": "Agency1",
    "category" : "Plan",
    "name" : "ABC plan",
    "type" : "PHC"
  },
  {
    "agency": "Agency2",
    "category" : "Plan",
    "name" : "LMN plan",
    "type" : "CHC"
  },
  {
    "agency": "Agency2",
    "category" : "Plan",
    "name" : "ABC plan",
    "type" : "BHC Plan"
  },
  {
    "agency": "Agency3",
    "category" : "Plan",
    "name" : "ABC plan",
    "type" : "PHC"
  },
  {
    "agency": "Agency3",
    "category" : "Plan",
    "name" : "ABC quote",
    "type" : "CHC"
  },
   {
    "agency": "Agency3",
    "category" : "Plan",
    "name" : "LMN Quote",
    "type" : "PHC"
  }


];
</code></pre>

<p>I am getting value of that dropdown by one function and storing its value like this-</p>

<pre><code>$scope.listByCategory= function(){

$scope.result=$scope.selectedAgency;
}
</code></pre>

<p>in typeahead I am giving like this- </p>

<pre><code>&lt;input type="text" ng-model="customSelected" id="inputTypeahead" placeholder="Custom agency" typeahead="agency.result as agency.name for agency in myAgencies | filter:$viewValue" typeahead-template-url="agencyTemplate.html" class="form-control"&gt;
</code></pre>

<p>I have created a plunker here-
<a href="https://plnkr.co/edit/HNgxjCajodFM6onsRMQH?p=preview" rel="nofollow">https://plnkr.co/edit/HNgxjCajodFM6onsRMQH?p=preview</a> 
My problem is that it is filtering on basis of "agency" not for a particular value of "agency"(means chosen dropdown value like "agency1") . Can anybody tell me how can I achieve that?</p>