JSFiddle - React, Tailwind, and code Playground
HTML
<div ng-app="myApp" ng-controller="BookingCtrl">
<select ng-model="selected.site" ng-options="s.data as s.site for s in data" ng-change="updateSelectedBuildingsAndFloors()">
<option value="">-- Site --</option>
</select>
<select ng-model="selected.building" ng-options="b.data as b.building for b in selectedBuildings">
<option value="">-- Building --</option>
</select>
<select ng-model="selected.floor" ng-options="f.data as f.floor for f in selectedFloors">
<option value="">-- Floor --</option>
</select>
</div>
JavaScript
var myApp = angular.module( 'myApp', [] );
myApp.controller( 'BookingCtrl', ['$scope', '$location', function ( $scope, $location ) {
$scope.selected = {};
$scope.data = [
{
"id" : "0",
"site" : "Brands Hatch",
"data" : 0,
"buildings" : [
{ "building" : "Building #1", "data":1},
{ "building" : "Building #2", "data":2 },
{ "building" : "Building #3", "data":3 }
],
"floors" : [
{ "floor" : "Floor #1", "data":1 },
{ "floor" : "Floor #2", "data":2 },
{ "floor" : "Floor #3", "data":3 }
]
},{
"id" : "1",
"site" : "Silverstone",
"data" : 1,
"buildings" : [
{ "building" : "Building #4", "data":1 },
{ "building" : "Building #5", "data":2 },
{ "building" : "Building #6", "data":3 }
],
"floors" : [
{ "floor" : "Floor #4", "data":1 },
{ "floor" : "Floor #5", "data":2 },
{ "floor" : "Floor #6", "data":3 }
]
}
];
$scope.updateSelectedBuildingsAndFloors = function(){
$scope.selectedDataArray = $scope.data.filter(function (data) { return data.data == $scope.selected.site });
$scope.selectedData = $scope.selectedDataArray[0];
if($scope.selectedData){
$scope.selectedBuildings = $scope.selectedData.buildings;
$scope.selectedFloors = $scope.selectedData.floors;
}
else {
$scope.selectedBuildings = [];
$scope.selectedFloors = [];
}
}
}]);