javascript - Switching data models in AngularJS for dynamic select menus -

what trying have 3 different <select> menus tied same data. changing first select menu, change menus 2 , 3's data.

this inside of controller:

$scope.data = [         {             "id" : "0",             "site" : "brands hatch",             "buildings" : [                 { "building" : "building #1" },                 { "building" : "building #2" },                 { "building" : "building #3" }             ],             "floors" : [                 { "floor" : "floor #1" },                 { "floor" : "floor #2" },                 { "floor" : "floor #3" }             ]         },{             "id" : "1",             "site" : "silverstone",             "buildings" : [                 { "building" : "building #4" },                 { "building" : "building #5" },                 { "building" : "building #6" }             ],             "floors" : [                 { "floor" : "floor #4" },                 { "floor" : "floor #5" },                 { "floor" : "floor #6" }             ]         }     ]; 

here's have tried reference far, uses same idea need: http://codepen.io/adnan-i/pen/gltap

when select either 'brands hatch' or 'silverstone' first select menu, other 2 menus have data change/update correspond correct data. using $watch listen changes, i've taken above codepen link.

here's watching script (unmodified , not working):

$scope.$watch('selected.id', function(id){         delete $scope.selected.value;         angular.foreach($scope.data, function(attr){             if(attr.id === id){                 $scope.selectedattr = attr;             }         });     }); 

as far know, deletes current data on change, loops through $scope.data , if attr.id matches id passed function, pushes data scope updates views. stuck on structuring , appreciate guidance , new angularjs. thank you! :)

jsfiddle full workings if can out: http://jsfiddle.net/sgdea/

check out i've done here: http://jsfiddle.net/sgdea/2/

you don't need use $watch @ -- need make inputs each dependent select reference selection in parent.

note how ng-options second , third select reference selected.site, set first select:

<div ng-app="myapp" ng-controller="bookingctrl">     <select ng-model="selected.site"             ng-options="s.site s in data">         <option value="">-- site --</option>     </select>     <select ng-model="selected.building"             ng-options="b.building b in selected.site.buildings">         <option value="">-- building --</option>     </select>     <select ng-model="selected.floor"             ng-options="f.floor f in selected.site.floors">         <option value="">-- floor --</option>     </select> </div> 

all did in javascript remove $watch:

var myapp = angular.module( 'myapp', [] );  myapp.controller( 'bookingctrl', ['$scope', '$location', function ( $scope, $location ) {      $scope.selected = {};      $scope.data = [         {             "id" : "0",             "site" : "brands hatch",             "buildings" : [                 { "building" : "building #1" },                 { "building" : "building #2" },                 { "building" : "building #3" }             ],             "floors" : [                 { "floor" : "floor #1" },                 { "floor" : "floor #2" },                 { "floor" : "floor #3" }             ]         },{             "id" : "1",             "site" : "silverstone",             "buildings" : [                 { "building" : "building #4" },                 { "building" : "building #5" },                 { "building" : "building #6" }             ],             "floors" : [                 { "floor" : "floor #4" },                 { "floor" : "floor #5" },                 { "floor" : "floor #6" }             ]         }     ]; }]);