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 — isherwood
– isherwood, Commented Feb 24, 2015 at 18:19

JB Nizet · Accepted Answer · 2015-02-24 18:19:19Z

4

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.

answered Feb 24, 2015 at 18:19

JB Nizet

694k94 gold badges1.3k silver badges1.3k bronze badges

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

Comments

Jeffrey Bosboom · Accepted Answer · 2015-02-25 03:19:48Z

2

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

edited Feb 25, 2015 at 3:19

Jeffrey Bosboom

13.7k16 gold badges83 silver badges95 bronze badges

answered Feb 24, 2015 at 18:32

Rahul

2112 silver badges10 bronze badges

3 Comments

Raza Over a year ago

Hey, I ran this jQuery command but it doesn't work. $('[selected="selected"]').attr('ng-selected', 'true')

Rahul Over a year ago

This is not a jquery command. Use it in this way: <option ng-selected="true">Value2</option> ie: directly into the html.

Raza Over a year ago

Thank you, I just did this: $scope.finance.payment_method = $('#payment_method').find(':selected').val();

Collectives™ on Stack Overflow

AngularJS - Dropdown doesn't show selected option

2 Answers 2

Comments

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related