<!DOCTYPE html>
<
html
ng-app
=
"gfg"
>
<
head
>
<
meta
charset
=
"utf-8"
/>
<
script
data-require
=
"angular.js@1.5.x"
src
=
data-semver
=
"1.5.11"
>
</
script
>
<
script
>
var app = angular.module('gfg', []);
// Prepopulate the models array here
app.controller('MainCtrl', function($scope) {
$scope.models = [{
country: 'India',
state: 'UP'
}];
$scope.countries = ['India', 'Japan', 'US'];
$scope.states = {
India: ['UP', 'MP', 'Bihar'],
Japan: ['Tokyo', 'Yokohama'],
US: ['California', 'Texas'],
}
$scope.addRow = function() {
$scope.models.push({});
}
$scope.getState = function(country) {
return $scope.states[country];
}
});
</
script
>
</
head
>
<
body
ng-controller
=
"MainCtrl"
>
<
center
>
<
h1
style
=
"color: green;"
>
GeeksForGeeks
</
h1
>
<
table
>
<
tr
>
<
th
>Country</
th
>
<
th
>State</
th
>
<
th
>Action</
th
>
</
tr
>
<
tr
ng-repeat
=
"model in models"
>
<
td
>
<
select
ng-options
=
"country as country for country in countries"
ng-model
=
"model.country"
ng-change
=
'getState(model.country)'
>
</
select
>
</
td
>
<
td
>
<
select
ng-options
=
"state as state for state in getState(model.country)"
ng-model
=
"model.state"
>
</
select
>
</
td
>
<
td
>
<
button
ng-click
=
"addRow()"
>Add Row</
button
>
</
td
>
</
tr
>
</
table
>
<
h3
style
=
"color:green"
>Selections</
h3
>
<
p
ng-repeat
=
"model in models"
>
{{model.country}} - {{model.state}}
</
p
>
</
center
>
</
body
>
</
html
>