多级下拉列表（angular）

<img src="https://img-blog.csdn.net/20151010170527121?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt="" />

<div ng-controller="MainCtrl">
    <select ng-model="selectedPerson" ng-options="obj.name for obj in people"></select>
    <select ng-model="selectedGenre">
        <option ng-repeat="label in people[selectedPerson.id].interest">{{label}}</option>
    </select>
</div>

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

app.controller( "MainCtrl" , function ($scope){

     $scope.people = [

                     {

                         id: 0,

                         name: '乔乐' ,

                         interest: [

                             '爬山' ,

                             '游泳' ,

                             '旅游' ,

                             '美食'

                         ]

                     },

                     {

                         id: 1,

                         name: 'Chris' ,

                         interest: [

                             '音乐' ,

                             '美食' ,

                             'Coffee' ,

                             '看书'

                         ]

                     },

                     {

                         id: 2,

                         name: '魏瑞' ,

                         interest: [

                             '音乐' ,

                             '电影' ,

                             '中国好声音' ,

                             '爸爸去哪了' ,

                             '非常静距离'

                         ]

                     },

                     {

                         id: 3,

                         name: '小飞子' ,

                         interest: [

                             '游泳' ,

                             '游戏' ,

                             '宅家里'

                         ]

                     }

                 ];

});