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, Dec 05 '17 at 13:13
Possible duplicate of [how to use ng-option to set default value of select element](https://stackoverflow.com/questions/17329495/how-to-use-ng-option-to-set-default-value-of-select-element) — Maher, Dec 05 '17 at 13:21

score 1 · Accepted Answer · answered Dec 05 '17 at 13:14

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

Thanks Zooly, i converted those ids into as int . but still no luck , Please check this plunk https://plnkr.co/edit/ItM8bB5gqu89vTCbTbR0?p=preview Should i must go through ng-options only ? — Training at Manorama, Dec 05 '17 at 19:45
Two options here: switch from `value` to `ng-value` or switch from `number` to `string` — Zooly, Dec 05 '17 at 22:18

score 1 · Answer 2 · answered Dec 05 '17 at 13:18

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 05 '17 at 13:18

NTP

4,338
3
16
24

I'm glad I was able to help. – NTP Dec 05 '17 at 19:56

Prasad De Silva · Answer 3 · 2017-12-05T13:43:42.953

<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;
                        }
                    });

score 1 · Answer 4 · answered Dec 05 '17 at 13:41

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>

Default Option not selected dropdown in angularjs

4 Answers4