<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.1/angular.js"></script>
<script>
var app = angular.module('selectionApp', []);
app.controller('SelectionController', function($scope, $http, $log) {
$http.get('JSONdata.json')
.success(function(data) {
$scope.locations = data;
$log.log(data);//Go to console log and see the log output.
});
});
</script>
</head>
<body ng-app="selectionApp">
<div ng-controller="SelectionController">
<h1>Select box with options</h1>
<div>
<div>Country List</div>
<select ng-model="countries" ng-options="loc.Name for loc in locations">
<option value="">Select country</option>
</select>
<div>City List</div>
<select ng-model='city' ng-options='c for c in countries.cities'>
<option value="">Select city</option>
</select>
</div>
</div>
</body>
</html>
// Code goes here
/* Styles go here */
[{
"Id": 1,
"Name": "India",
"cities": ["New Delhi", "Delhi 96"]
}, {
"Id": 2,
"Name": "Nepal",
"cities": ["Lumbini", "Lumbini"]
}, {
"Id": 3,
"Name": "United Kingdom",
"cities": ["London", "Manchester"]
}]