ドロップダウンのオブジェクトの対応する配列を選択した値をリストとして取得するにはどうすればよいですか？

Question

オブジェクトの配列（国）を含む基本的なドロップダウンがあり、オブジェクトごとにオブジェクトの配列（都市）があります。したがって、ドロップダウンで国を選択すると、そのオブジェクトの都市リストが変更に反映されなければなりません。ここで

は私のコードは次のとおりです。

はJavaScript：

$scope.data = [ 
    { 
    "id": 1, 
    "countryName": "India", 
    "cities": [ 
    { 
     "id": 11, 
     "cityName": "hyderabad" 
    }, 
    { 
     "id": 12, 
     "cityName": "Bengaluru" 
    }, 
    { 
     "id": 13, 
     "cityName": "Mumbai" 
    }, 
    { 
     "id": 14, 
     "cityName": "Delhi" 
    } 
    ] 
}, 
{ 
    "id": 2, 
    "countryName": "Afghanisthan", 
    "cities": [ 
    { 
     "id": 21, 
     "cityName": "kabul" 
    }, 
    { 
     "id": 22, 
     "cityName": "kandahar", 
    }, 
    { 
     "id": 23, 
     "cityName": "herat" 
    } 
    ] 
}, 
{ 
    "id": 3, 
    "countryName": "Alaska", 
    "cities": [ 
    { 
     "id": 31, 
     "cityName": "Fairbanks" 
    }, 
    { 
     "id": 32, 
     "cityName": "Juneau" 
    }, 
    { 
     "id": 33, 
     "cityName": "Anchorage" 
    } 
    ] 
} 
] 

HTML：

 <select> 
      <option ng-repeat="user in data | filter:search:strict" ng- 
     click="selectedItem()">{{user.countryName}}</option> 

     </select> 

Answer 1

<select ng-options="n as n.countryName for n in data" ng-model="selected">  
    </select> 
<ul> 
    <li ng-repeat="n in selected.cities"> 
    {{n.cityName}} 
    </li> 
</ul>