ng-selected not working in select field

Question

I am trying to set the default value of a select field to a set option but its not working and I can't seem to figure out what am I doing wrong?

In my controller I have:

$scope.interp_id = "2"; // set the default id
$http.get("web/controllers/get.php")
.then(function (response) {
    $scope.interpreters = response.data.records;
});

get.php is a php file that returns json (this is working properly).

My select looks like:

<select ng-model="interpreters_id">
    <option ng-repeat="x in interpreters" value="{{x.id}}" ng-selected="{{x.id == interp_id}}">{{x.first_name}} {{x.middle_name}} {{x.last_name}}</option>
</select>

When I go to view it in my browser it looks like:

but when I inspect the element it shows that option ng-selected is True.

what am I doing wrong?

no need to use ng-selected here.. It should work without ng-selected, I'd say better use ng-options directive — Pankaj Parkar
– Pankaj Parkar, Commented Sep 2, 2016 at 13:27

Ricardo Velhote · Accepted Answer · 2016-09-05 13:48:53Z

ngOptions is the recommended way to use select elements in Angular.

Also, if you look at the ngSelected documentation there is a yellow box that states that it does not work properly with the select and ngModel properties which is, in a way, what you are trying to do.

ngRepeat will gladly repeat your option elements however it is not the correct way to work with a select element.

I have prepared a fiddle for you to try it out.

<div ng-app="ngOptionsApp">
    <div ng-controller="ExampleController">
        <select ng-model="selectedInterpreter" ng-options="interpreter as interpreter.name for interpreter in interpreters track by interpreter.id">
            <option value="">Select an Interpreter</option>
        </select>  

        {{selectedInterpreter}}
    </div>
</div>

angular.module('ngOptionsApp', []).controller('ExampleController', ['$scope', function($scope) {
    $scope.interpreters=[{id: 1, name:'Gill Bates'}, {id: 2, name:'Cohn Jarmack'}, {id: 3, name:'Melon Musk'}];
    $scope.selectedInterpreter = $scope.interpreters[0];
}]);

Hope it helps ;)

No, sorry it was a bad copy/paste. I will edit the answer ;) selectedInterpreter is the valid ng-model.

endrcn · Accepted Answer · 2016-09-06 06:18:11Z

1

You should not use the curly braces in ng-selected directive. May you try this?

<option ng-repeat="x in interpreters" value="{{x.id}}" ng-selected="x.id == interp_id">{{x.first_name}} {{x.middle_name}} {{x.last_name}}</option>

http://jsfiddle.net/endrcn/44j19ngp/

edited Sep 6, 2016 at 6:18

answered Sep 2, 2016 at 13:32

endrcn

3192 silver badges10 bronze badges

2 Comments

lancey Over a year ago

This was my first thought as well but it doesnt work. After implementing that change and inspecting the element it shows as just that 'ng-selected="x.id == interp_id"'

endrcn Over a year ago

I have written code for this problem. You can review this link: jsfiddle.net/endrcn/44j19ngp

Collectives™ on Stack Overflow

ng-selected not working in select field

2 Answers 2

3 Comments

2 Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

2 Comments

Related