AngularJS - Dropdown doesn't show selected option

Question

I have this select dropdown with "Enbridge Billing" selected.

<select class="form-control required ng-pristine ng-valid" ng-model="finance.payment_method" id="payment_method" name="payment_method">
    <option value=""></option>
    <option value="EGD" selected="selected">Enbridge Billing</option>
    <option value="PAPP">PAD Billing</option>
</select>

However, on screen, it's not selected:

Empty Select dropdown

I've removed all the stuff from app.js and still the problem presists:

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

app.config(function($interpolateProvider) {
    $interpolateProvider.startSymbol('%%');
    $interpolateProvider.endSymbol('%%');
});

app.controller('NewJobFinanceController',
    function ($scope) {


    });

Edit:

I just did this in the controller:

$scope.finance.payment_method = $('#payment_method').find(':selected').val();

possible duplicate of [How to set a selected option of a dropdown list control using angular JS](http://stackoverflow.com/questions/17968760/how-to-set-a-selected-option-of-a-dropdown-list-control-using-angular-js) — isherwood, Feb 24 '15 at 18:19

score 4 · Accepted Answer · answered Feb 24 '15 at 18:19

The single point of truth in angular is the model. Not the view. You update the model, and the view updates itself to reflect the state of the model.

You configured the select box as

<select ng-model="finance.payment_method" ...>

So that means that the currently selected value is finance.payment_method. That's where angular gets the selected value. Since it's undefined, you have a blank select box.

BTW, you should not set, required, ng-pristine and ng-valid as class of your select box. angular will add and remove this classes by itself, depending on the actual state of the form control.

score 2 · Answer 2 · edited Feb 25 '15 at 03:19

2

Simply use ng-selected="true" instead of selected="selected".

edited Feb 25 '15 at 03:19

Jeffrey Bosboom

13,313
16
79
92

answered Feb 24 '15 at 18:32

Rahul

211
2
10

Hey, I ran this jQuery command but it doesn't work. $('[selected="selected"]').attr('ng-selected', 'true') – Raza Feb 26 '15 at 14:44
This is not a jquery command. Use it in this way: ie: directly into the html. – Rahul Feb 26 '15 at 15:01
Thank you, I just did this: $scope.finance.payment_method = $('#payment_method').find(':selected').val(); – Raza Feb 28 '15 at 20:17

AngularJS - Dropdown doesn't show selected option

2 Answers2