<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Example</title>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.min.js"></script>
</head>
<body ng-app="selectExample">
<script>
angular.module('selectExample', [])
.controller('ExampleController', ['$scope', function($scope) {
$scope.chooseCountries = [{
name: "France",
}, {
name: "Gibraltar",
}, {
name: "Malta",
}];
$scope.choosePlans = [{
plan:"One Way"
}, {
plan:"Two Way"
}];
$scope.selectedCountry = "";
$scope.selectedPlan = "";
}]);
</script>
<div ng-controller="ExampleController">
<hr>
ng-options
<hr>
<select ng-model="selectedCountry"
ng-options="country.name for country in chooseCountries">
<option value="selectedCountry">{{selectedCountry}}</option>
</select>
<select ng-model="selectedPlan"
ng-options="plan.plan for plan in choosePlans">
</select>
</div>
</body>
</html>