var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
$scope.name = 'World';
$scope.data = {
"states": [
{"name": "Maharashtra", "cities": ["Pune", "Mumbai", "Nagpur"]},
{"name": "Gujarat", "cities": ["Surat", "Ahmedabad", "Baroda"]},
{"name": "Rajasthan", "cities": ["Jaipur", "Ajmer", "Jodhpur"]}
]
}
});
<!DOCTYPE html>
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script>document.write('<base href="' + document.location + '" />');</script>
<link rel="stylesheet" href="style.css" />
<script data-require="angular.js@1.4.x" src="https://code.angularjs.org/1.4.12/angular.js" data-semver="1.4.9"></script>
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
<table>
<tr>
<td>
state
</td>
<td>
<select ng-model="state" ng-options="state.name for state in data.states">
<option value=''>Select</option>
</select>
</td>
</tr>
<tr>
<td>
City
</td>
<td>
<select ng-disabled="!state" ng-model="city" ng-options="city for city in state.cities">
<option value=''>Select</option>
</select>
</td>
</tr>
</table>
</body>
</html>
/* Put your css in here */