Chained select

HTML

<div ng-app="myApp">
    
      <div ng-controller="MyAppCtrl">
            <p>
            <select ng-model="selectedParentId">
                <option>Choose...</option>
                <option ng-repeat="option in parentTypes">{{option.value}}</option>
            </select>
            </p>
            <p>
            <select>
                <option selected>Choose...</option>
                <option ng-repeat="childOption in parentTypes[selectedParentId].childTypes">{{childOption.value}}</option>
            </select>
            </p>
      </div>
      
    </div>

JavaScript

var app = angular
    .module('myApp', []);


    app.controller("MyAppCtrl", function($scope) {
        
        $scope.parentTypes = {
        colours: {
                "value": "colours",
                "childTypes":[
                    {"value":"red"},
                    {"value":"green"},
                    {"value":"blue"},
                ]
            },
        flowers: {
                "value": "flowers",
                "childTypes":[
                    {"value":"rose"},
                    {"value":"tulip"},
                    {"value":"lilly"},
                ]
            },
        tools: {
                "value": "tools",
                "childTypes":[
                    {"value":"hammer"},
                    {"value":"screwdriver"},
                    {"value":"wrench"},
                ]
            },
        
        cars: {
                "value": "cars",
                "childTypes":[
                    {"value":"Toyota"},
                    {"value":"Benz"},
                    {"value":"Ferrari"},
                ]
            },                        
            
        };
    
       
        $scope.selectedParentId = "flowers";
        
    });