Two comboboxes showing nested arrays in AngularJS - combobox

Question

I have an array which as arrays as members:
[
{"group":"Canada","data":[{"value":"Ontario","description":"Toronto"},
{"value":"Quebec","description":"Quebec City"},
{"value":"Manitoba","description":"Winnipeg"}
]
},
{"group":"Mexico","data":[{"value":"Jalisco","description":"Guadalajara"},
{"value":"Nayarit","description":"Tepic"}
]
},
{"group":"United States of America","data":[
{"value":"Alabama","description":"Montgomery"},
{"value":"Georgia","description":"Atlanta"},
{"value":"Mississippi","description":"Jackson"},
{"value":"Louisiana","description":"Baton Rouge"},
{"value":"Texas","description":"Ausint"}
]
}
]
I would like to have an AngularJS combobox which shows the list of group countries. When users select each country, I would like another combo to show the names of regions in that country.
Can anybody point me to tutorials which show how to achieve it?

Answer 1

Plunker example
#Component({
selector: 'my-app',
providers: [],
template: `
<div>
<select [(ngModel)]="selectedGroup">
<option *ngFor="let group of groups" [ngValue]="group">{{group.group}}</option>
</select>
<select [(ngModel)]="selectedData">
<option *ngFor="let item of getData()" [ngValue]="item">{{item.value}}</option>
</select>
</div>
`,
directives: []
})
export class App {
selectedGroup;
selectedData;
groups = [
...
];
constructor() {
this.name = 'Angular2 (Release Candidate!)'
}
getData() {
let idx = this.groups.indexOf(this.selectedGroup);
if(idx >= 0) {
console.log(this.groups[idx]);
return this.groups[idx].data;
}
}
}