In this example we have two dropdown first bind with countries and second bind with states using ng-options directive. Second dropdown shows the states of the country selected in first dropdown.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Welcome to LearnKode - A code learning platform</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js"></script>
</head>
<body ng-app="Example">
<div ng-controller="ExampleController" ng-init="Country='India'">
Country <select ng-model="Country" ng-options="p.Name as p.Name for p in Countries"></select><br /><br />
State <select>
<option ng-model="state" ng-repeat="p in States| filter:Country">{{p.Name}}</option>
</select>
</div>
<script>
var app = angular.module("Example", []);
app.controller('ExampleController', ['$scope', function ($scope) {
$scope.Countries = [{ Name: 'Canada' }, { Name: 'India' }];
$scope.States = [{ Name: 'Arunachal Pradesh', country: 'India' }, { Name: 'Punjab', country: 'India' }, { Name: 'Rajasthan', country: 'India' }, { Name: 'Quebec', country: 'Canada' }, { Name: 'Manitoba', country: 'Canada' }];
}]);
</script>
</body>
</html>
