<!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"]
}]