set default value in dropdown list in angularjs

set default value in dropdown list in angularjs

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

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>
    <script src=""></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"
<body ng-app="myapp">
    <div ng-controller="MyController">
            Country Name :  <select ng-model="register.countryId" ng-options=" as for country in register.countries"></select>
            Country-Id : {{register.countryId}}

The demo output: go to link


Hey! I'm Anil Singh. I author this blog. I'm Active Blogger, Programmer. I love learning new technologies, programming, blogging and participating the forum discussions more...
My Blogs - and
My Books - Interview Questions and Answers Books- Get Your Book in 15+ Digital Stores Worldwide..

You Might Also Like
Post a Comment Powered by Blogger.
ASK Questions