Default Option not selected dropdown in angularjs

Question

I am struggling with dropdown list, Please refer bellow code

My Controller

(function(angular) {
  'use strict';
angular.module('ngrepeatSelect', [])
  .controller('ExampleController', ['$scope', function($scope) {
    $scope.data = {
     model: null,
     availableOptions: [
       {id: '1', name: 'Option A'},
       {id: '2', name: 'Option B'},
       {id: '3', name: 'Option C'}
     ]
    };

    $scope.data.model=1;

 }]);
})(window.angular);

My UI

<body ng-app="ngrepeatSelect">
  <div ng-controller="ExampleController">
  <form name="myForm">
    <label for="repeatSelect"> Repeat select: </label>
    <select name="repeatSelect" id="repeatSelect" ng-model="data.model">
      <option ng-repeat="option in data.availableOptions" value="{{option.id}}">{{option.name}}</option>
    </select>
  </form>
  <hr>
  <tt>model = {{data.model}}</tt><br/>
</div>
</body>

Here is an demo, In this demo i am setting $scope.data.model as 1 , then why my Dropdown list showing blank ..

I had searched and tried lot, but no luck, Please help. Thanks in advance, and sorry for my bad English.

Edit Note : I had tried this before, But still facing this issue.

assign string value to your data.model. ($scope.data.model='1';) — Bharadwaj
– Bharadwaj, Commented Dec 5, 2017 at 13:13
Possible duplicate of how to use ng-option to set default value of select element — Maher
– Maher, Commented Dec 5, 2017 at 13:21

Zooly · Accepted Answer · 2017-12-05 13:14:24Z

1

Your object IDs are string whereas your data.model is number.

Uniform your data type and it will work.

(function(angular) {
  'use strict';
angular.module('ngrepeatSelect', [])
  .controller('ExampleController', ['$scope', function($scope) {
    $scope.data = {
     model: null,
     availableOptions: [
       {id: '1', name: 'Option A'},
       {id: '2', name: 'Option B'},
       {id: '3', name: 'Option C'}
     ]
    };
    
    $scope.data.model='1';
    
 }]);
})(window.angular);

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Example - example-select-ngrepeat-production</title>
  

  <script src="//code.angularjs.org/snapshot/angular.min.js"></script>
  <script src="app.js"></script>
  

  
</head>
<body ng-app="ngrepeatSelect">
  <div ng-controller="ExampleController">
  <form name="myForm">
    <label for="repeatSelect"> Repeat select: </label>
    <select name="repeatSelect" id="repeatSelect" ng-model="data.model">
      <option ng-repeat="option in data.availableOptions" value="{{option.id}}">{{option.name}}</option>
    </select>
  </form>
  <hr>
  <tt>model = {{data.model}}</tt><br/>
</div>
</body>
</html>

See example on AngularJS official documentation

answered Dec 5, 2017 at 13:14

Zooly

4,7974 gold badges40 silver badges55 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Training at Manorama Over a year ago

Thanks Zooly, i converted those ids into as int . but still no luck , Please check this plunk plnkr.co/edit/ItM8bB5gqu89vTCbTbR0?p=preview Should i must go through ng-options only ?

Zooly Over a year ago

Two options here: switch from value to ng-value or switch from number to string

NTP · Accepted Answer · 2017-12-05 13:18:24Z

1

change value in your select with ng-value

<select name="repeatSelect" id="repeatSelect" ng-model="data.model">
  <option ng-repeat="option in data.availableOptions" ng-value="{{option.id}}">{{option.name}}</option>
</select>

Updated Plunker

answered Dec 5, 2017 at 13:18

NTP

4,4483 gold badges18 silver badges25 bronze badges

1 Comment

NTP Over a year ago

I'm glad I was able to help.

Nitheesh · Accepted Answer · 2017-12-05 13:41:15Z

The best practice in angular ng-repeat is using ng-options for select. In order to make default selection, we need to assign ng-model value in the controller as the option object itself. i.e, the data type of the ng-model and the repeating option must be the same as exact.

Let us assign it as

$scope.data.model = $scope.data.availableOptions[0];

Here is an working example of your question.

(function (angular) {
    'use strict';
    angular.module('ngrepeatSelect', [])
        .controller('ExampleController', ['$scope', function ($scope) {
            $scope.data = {
                model: null,
                availableOptions: [{id: '1', name: 'Option A'},
                    {id: '2',name: 'Option B'},
                    {id: '3',name: 'Option C'}]
            };

            $scope.data.model = $scope.data.availableOptions[0];

    }]);
})(window.angular);

<body ng-app="ngrepeatSelect">
    <div ng-controller="ExampleController">
        <form name="myForm">
            <label for="repeatSelect"> Repeat select: </label>
            <select name="repeatSelect" id="repeatSelect" ng-model="data.model" ng-options="option.name for option in data.availableOptions track by option.id">
            </select>
        </form>
        <hr>
        <tt>model = {{data.model}}</tt>
        <br/>
    </div>
</body>

Prasad De Silva · Accepted Answer · 2017-12-05 13:43:42Z

1

<select name="repeatSelect" id="repeatSelect" ng-model="data.model" ng-options="option.name for option in  data.availableOptions track by option.id" ></select>

More info: https://docs.angularjs.org/api/ng/directive/ngOptions

If you want to select an option:

$scope.data.model= $scope.data.availableOptions[1]; // 1 ==> index of the option you want to select

or select using a property of the object

  angular.forEach($scope.data.availableOptions, function (option, index) {
                        if (option.id === 1) { // 1 ==> id of the option
                            $scope.data.model= option;
                        }
                    });

edited Dec 5, 2017 at 13:43

answered Dec 5, 2017 at 13:26

Prasad De Silva

8361 gold badge12 silver badges22 bronze badges

Collectives™ on Stack Overflow

Default Option not selected dropdown in angularjs

4 Answers 4

2 Comments

1 Comment

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related