how to filter typeahead on basis of a particular dropdown value using Angular JS

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.

My JSON is this-

 $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"
  }


];

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

$scope.listByCategory= function(){

$scope.result=$scope.selectedAgency;
}

in typeahead I am giving like this-

<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">

I have created a plunker here- https://plnkr.co/edit/HNgxjCajodFM6onsRMQH?p=preview 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?

Solution

You filter for the type-ahead is only filtering by the type-ahead input, not the selected agency. Change the filter to this:

filter:{name: $viewValue, agency: selectedAgency}

And it will work.

Update: This is working, but when you select "All" again, you will get no results. To fix this, use this filter:

filter:{name: $viewValue, agency: selectedAgency.length ? selectedAgency : undefined}

This filter will check if the string in selectedAgency is not empty, and if it is empty, will set the filter for agency to undefined, so it will not affect the filter.