What I am trying to do is have three different menus which will be all be tied into the same data. Changing the first select menu, will change menus
Check out what I've done here: http://jsfiddle.net/sgdea/2/
You don't need to use $watch at all -- you just need to make the inputs for each dependent select reference the selection in the parent.
Note how the ng-options for the second and third select reference selected.site, which is set by the first select:
<div ng-app="myApp" ng-controller="BookingCtrl">
<select ng-model="selected.site"
ng-options="s.site for s in data">
<option value="">-- Site --</option>
</select>
<select ng-model="selected.building"
ng-options="b.building for b in selected.site.buildings">
<option value="">-- Building --</option>
</select>
<select ng-model="selected.floor"
ng-options="f.floor for f in selected.site.floors">
<option value="">-- Floor --</option>
</select>
</div>
All I did in the javascript was remove your $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" }
]
}
];
}]);