html - Populate dropdown 2 using option in dropdown 1 - firebase -

i trying show equipment's system selected in first dropdown. though not sure on how accomplish that. have thought of using ng-model don't know how accomplish task using that! have included json format @ end of post. thank you.

<div class="form-group col-xs-6" id="syslist">   <label for="selectsys">select system list:</label>   <select class="form-control" id="selectsys">     <option value="" disabled="" selected="" style="display: none">list of systems</option>       <option data-ng-repeat="d in data" data-ng-model="systems">{{d.$id}}</option>   </select> </div>  <div class="form-group col-xs-6" id="equiplist">   <label for="selectequ">select equipment list:</label>   <select class="form-control" id="selectequ">     <option value="" disabled="" selected="" style="display: none">list of equipments</option>       <option>equipments</option>   </select> </div> 

js

    app.controller('searchctrl', ['$scope', '$firebaseobject', '$firebasearray', function ($scope, $firebaseobject, $firebasearray) {     'use strict';      var ref = firebase.database().ref();         var data = ref.child("data");         var list = $firebasearray(data);          list.$loaded().then(function(data) {             $scope.data = data;             console.log($scope.data);         }).catch(function(error) {             $scope.error = error;         }); }]); 

{   "data" : {     "system a" : {       "equipments" : {         "equipment 1" : {           "equipment" : "equipment 1"         }       }     },     "system b" : {       "equipments" : {         "equipment 1" : {           "equipment" : "equipment 1"         },         "equipment 2" : {           "equipment" : "equipment 2"         }       }     },     "system c" : {       "equipments" : {         "s1" : {           "equipment" : "s1"         },         "s2" : {           "equipment" : "s2"         },         "s3" : {           "equipment" : "s3"         },         "s4" : {           "equipment" : "s4"         },         "s5" : {           "equipment" : "s5"         }       }     }   } } 

this bind select ngoptions:

when choose currentsystem, modify second select as:

key key (key, value) in data[currentsystem].equipments 

html

<div>   <select ng-model="currentsystem"            ng-options="key key (key, value) in data"           ng-change="vm.onsystemchange(currentsystem)">     <option value="" disabled="" selected="" style="display: none">list of systems</option>   </select> </div>  <div >   <select ng-model="currentequipment"             ng-options="key key (key, value) in data[currentsystem].equipments"        >     <option value="" disabled="" selected="" style="display: none">list of equipments</option>   </select> </div> 

this js part onsystemchange:

vm.onsystemchange = function(item){    // once user selected system, take 1st key second list    var key =  object.keys( $scope.data[$scope.currentsystem].equipments)[0]      $scope.currentequipment =      $scope.data[$scope.currentsystem].equipments[key].equipment;      } 

demo plunker

---

_{i think demo enough sort things out , can continue here}