How to get values selecting of first drop down values related to second drop down values using angular js?

How to get values one related to another using drop down in angular js?

Hi all I have created two drop down fields in MyPlunker and with in the ng-option I have used filter like filter:{roles: 'kp'} because to get only the kp users.

First drop down list are kp users categories and second drop down list is kp users.
What I am looking is if we select Religion & Culture in first drop down, the second drop down should display only based on categories users.
For example:- 1.in first drop down if we select as Religion & Culture and the second drop down list must like 'Francis', 2.in first drop down if we select as Moral Ethics and the second drop down list must like 'jennifer david'.
Please check MyPlunker for referrence and help us, please update my plunker as well to know the exact solution...

My Html

    <div>
  <p></p>
  <lable>Kp Users categories</lable>
   <select ng-model="Filtercategorieskp"  ng-options="item.categories for item in users | filter:{roles: 'kp'}">
  </select>
</div>  

<div>
  <lable>Kp Users</lable>
   <select ng-model="Filterkp" ng-change="newClass=Filterkp.username"  ng-options="item.username for item in users | filter:{roles: 'kp'}">
  </select>
</div>

My Data:-

      $scope.users = [
{
"_id": "5a12ab443cb3837415229d2e",
"displayName": "Avinaash Kumar",
"username": "John",
"created": "2017-11-20T10:15:32.747Z",
"roles": ["kp"],
"categories": ["Environment & and Health"],
"lastName": "Kumar",
"firstName": "Avinaash"
},
{
"_id": "5a12a7343cb3837415229d2d",
"displayName": "sarawana kumar",
"provider": "local",
"username": "Henry",
"roles": ["school_student"],
"categories": [
"Religion & Culture",
"Moral Ethics"
],
"lastName": "kumar",
"firstName": "sarawana"
},
{
"_id": "59ed8a1fd80e55a8100d51f0",
"displayName": "selvam mani",
"provider": "local",
"username": "Francis",
"roles": ["kp"],
"categories": ["Religion & Culture"],
"lastName": "mani",
"firstName": "selvam"
},
{
"_id": "59ed87cdd80e55a8100d51ef",
"displayName": "jennifer david",
"provider": "local",
"username": "jennifer david",
"roles": ["kp"],
"categories": ["Moral Ethics"],
"lastName": "david",
"firstName": "jennifer"
},
{
"_id": "59e09811a7319ae81feed177",
"displayName": "ahamed nizar",
"provider": "local",
"username": "ahamednizar",
"created": "2017-10-13T10:40:17.142Z",
"roles": ["kp"],
"categories": ["Religion & Culture"],
"lastName": "nizar",
"firstName": "ahamed"
},
{
"_id": "59df6a76b6748bc809050697",
"displayName": "Maniselvam selvam",
"provider": "local",
"username": "David",
"roles": ["admin"],
"categories": ["Moral Ethics"],
"lastName": "selvam",
"firstName": "Maniselvam"
}

Solution

I managed to make it work by:

 <div>
      <p></p>
      <lable>Kp Users categories</lable>
       <select ng-model="filter.Filtercategorieskp"  ng-options="item.categories for item in users | filter:{roles: 'kp'}">
      </select>
    </div>  
    <div>
      <lable>Kp Users</lable>
       <select ng-model="Filterkp" ng-change="newClass=Filterkp.username"  ng-options="item.username for item in users | filter:{ categories: filter.Filtercategorieskp.categories, roles:['kp']}">
      </select>
    </div>

and in the js just add

$scope.filter = {};

Example