I have the following Angular code in my HTML file. I have a drop-down box with two fixed choices: A and B. The user must select either A or B. It cannot be left blank. I would like the default selection to be A. How can I do it?

The following code starts off with an empty drop-down box. I don't want that. I want A to be pre-selected.

<div ng-controller="MyController as myCtrl">
  <select ng-model="myCtrl.param1">
    <option value="a" selected>A</option>
    <option value="b">B</option>
  </select><br/>
  <button ng-click="myCtrl.submit()">submit</button>
</div>

I have the following Angular code in my HTML file. I have a drop-down box with two fixed choices: A and B. The user must select either A or B. It cannot be left blank. I would like the default selection to be A. How can I do it?

The following code starts off with an empty drop-down box. I don't want that. I want A to be pre-selected.

<div ng-controller="MyController as myCtrl">
  <select ng-model="myCtrl.param1">
    <option value="a" selected>A</option>
    <option value="b">B</option>
  </select><br/>
  <button ng-click="myCtrl.submit()">submit</button>
</div>

• javascript
• html
• angularjs

• 2 the code you've presented works exactly as you're requesting. Please provide more context for reproducible results. Double check param1 == 'a' too. – 8eecf0d2 Commented Feb 16, 2016 at 5:34
• 1 try to use ng-selected . – Dineshaws Commented Feb 16, 2016 at 5:37
• If you don't use selected, empty selection will be there. – Bikas Commented Feb 16, 2016 at 5:44
• @Dineshaws ng-selected="true" worked. Thanks! – Saqib Ali Commented Feb 16, 2016 at 6:14

3 Answers 3

You can declare a variable in your controller as follows:

$scope.myCtrl.param1 = 'A';

Working fiddle: https://jsfiddle/n9tL7cdr/2/

The following illustrates the ways, by which one can do it:

Option 1: (by adding ng-selected="true")

HTML:

<div ng-app="app" ng-controller="MyController as myCtrl">
    <select ng-model="myCtrl.param1">
        <option value="a" ng-selected="true">A</option>
        <option value="b">B</option>
    </select><br />
    <button ng-click="myCtrl.submit()">submit</button>
</div>

JS:

var app = angular.module('app', []);

app.controller('MyController', function ($scope) {
    var myCtrl = this;
    myCtrl.submit = function () {
       /*..*/
    }

    $scope = myCtrl;
});

Option 2: (by setting the variable in the controller)

HTML:

<div ng-app="app" ng-controller="MyController as myCtrl">
    <select ng-model="myCtrl.param1">
        <option value="a">A</option>
        <option value="b">B</option>
    </select><br />
    <button ng-click="myCtrl.submit()">submit</button>
</div>

JS:

var app = angular.module('app', []);

app.controller('MyController', function ($scope) {
    var myCtrl = this;
    myCtrl.submit = function () {

    }
    myCtrl.param1 = "a";

    $scope = myCtrl;
});

If you do not want to pre-select any, but show a label then ->

Option 3: (by just showing a 'Select' label - no pre-select in this case)

HTML:

<div ng-app="app" ng-controller="MyController as myCtrl">
    <select ng-model="myCtrl.param1">
        <option value="">Select</option>
        <option value="a">A</option>
        <option value="b">B</option>
    </select><br />
    <button ng-click="myCtrl.submit()">submit</button>
</div>

JS:

var app = angular.module('app', []);

app.controller('MyController', function ($scope) {
    var myCtrl = this;
    myCtrl.submit = function () {

    }
    $scope = myCtrl;
});

You need to use ng-selected and based on key you can keep selected or not selected items for e.g

<md-select ng-model="sms.from" ng-change="getSelectedValue(sms.from, 'from')">
  <md-option ng-repeat="(i,item) in fromNumber" ng-value="item" ng-selected="i == 0 ? true:false">{{ item }}</md-option>
</md-select>