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:
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" }
]
}
];
}]);