JSFiddle - React, Tailwind, and code Playground

by Arco Brouwer

HTML

<div ng-app="myApp" ng-controller="myAppCtrl">
    <select class="firstDropDown" ng-model="location" ng-options="item.id as item.value for item in locationNames">
<option value="">Select location</option>
</select>
    <select class="secondDropDown" ng-model="incident" ng-options="incident.id as incident.value for incident in incidentTypesList[location]">
    <option value="">Select incident</option>
    </select>
</div>

JavaScript

var myApp = angular.module("myApp", [])

myApp.controller("myAppCtrl", function($scope){
    $scope.locationNames=[
        {id:"Onboard",value:"On-board service"},
        {id:"Clubhouse",value:"Clubhouse"},
        {id:"Gate",value:"Gate"}
    ];
        
    $scope.incidentTypesList={
        Onboard:[
            {id:"IFE faulty",value:"IFE faulty"},
            {id:"223",value:"No special meal as ordered"},
            {id:"Spoilt",value:"Spoilt/damaged belongings"}
        ], 
        Clubhouse:[
            {id:"",value:"No appointments available"},
            {id:"",value:"Late/delayed transport service"},
            {id:"",value:"Facilities not available"}
        ]
    }   
});