Cascading dropdowns using Angular and Web API 2

This is a very simple project I will use to determine who to hire for more extensive work. Here are the details: Three cascading dropdowns will allow the user to pick a city, then a sport, then a team. The dependency order is: 1) City 2) Sport 3) Team With each selection, the data displayed in the next dropdown are limited to the rows with data matching the parent dropdown. If the user picks Chicago, then Baseball, the team dropdown will have only two possibilities, “White Sox” and “Cubs”. If the sport picked was football, only “Bears” would be displayed in the team dropdown. If the user picks "New Orleans", the sport dropdown will only allow "Basketball" and "Football" to be chosen. When the page is first displayed, only the city dropdown is enabled. By default: The city dropdown displays “Pick a city” The sport dropdown displays “Pick a sport” The team dropdown displays “Pick a team” Once a city is picked, the sport dropdown is enabled. Once a sport is enabled, the team dropdown is enabled. If the user changes the city, the sport dropdown changes back to “Pick a sport”, the team dropdown changes to “Pick a team” and is disabled until a sport is picked. Once all three dropdowns are set, enable a button that will launch a modal dialog to display the entire selection as a simple string. The modal dialog should have a close button. The button should not be enabled until all of the choices are made. If a city or sport dropdown changes, the button should be disabled again until the team is chosen. Layout is not important for now, just functionality. However, a creative layout will impress. You may also use the Kendo UI controls if you have access to them. I would like to see how you would normally build a page like this using an MVC 5 project, C#, Bootstrap, Angular, and Web API 2. The page view model must be based on Angular. The data should be provided to the page from a Web API 2 controller. JSON objects with sample data are in the attached file.