This is interesting question, how to set default value in option or drop-down list using angular. We can achieve the angular directive with two way binding ng-model and ng-option also.
In the below example code, bind the collection on ng-option and countryId from country collection on ng-model.
Go to live demo link http://embed.plnkr.co/Wlw62X/preview
Go to live demo link http://embed.plnkr.co/Wlw62X/preview
Using the we can bind the collection in option or drop-down list.
If you want to set the default value, that time need to add default countryId within the controller $scope.
The code look like [$scope.register.countryId = "1";] // This is the default countryId.
The example code as given below.
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.5/angular.min.js"></script>
<script>
angular.module("myapp", [])
.controller("MyController", function ($scope) {
$scope.register = {};
$scope.register.countryId = "1";
$scope.register.countries = [{
id: "1",
name: "India"
}, {
id: "2",
name: "USA"
}, {
id: "3",
name: "UK"
}, {
id: "4",
name: "Nepal"
}];
});
</script>
</head>
<body ng-app="myapp">
<div ng-controller="MyController">
<div>
Country Name : <select ng-model="register.countryId" ng-options="country.id as country.name for country in register.countries"></select>
</div>
<div>
Country-Id : {{register.countryId}}
</div>
</div>
</body>