set selected value for select element angularJS

Question

My code is like this

    <body ng-app="myApp" ng-controller="MainCtrl">
    <select data-ng-model="myclass" data-ng-options="color.name for color in colors">
        <option value="">-- Select Freight Class --</option>
    </select>
</body>

    angular.module('myApp', []).controller('MainCtrl', [
    '$http', '$scope', '$filter', function ($http, $scope, $filter) {
    $scope.myclass = {
        "name": "65"
    };
    $scope.colors = [{
        name: '50'
    }, {
        name: '55'
    }, {
        name: '105'
    }, {
        name: '110'
    }, {
        name: '400'
    }, {
        name: '500'
    }];

}]);

as you can see I am trying to set default selected value of this select as 65 but its not working. Can any one tell me how to achieve this? http://jsfiddle.net/d8kg0uys/

dfsq · Accepted Answer · 2014-10-31T13:12:31.110

First of all you don't have {"name": "65"} object in colors array at all. But even if you tried to select option {"name": "55"} it would not work. And the reason is because $scope.myclass is not equal to any element in colors array.

Angular compares objects to set corresponding option as selected, and one object equals to another only when it's the same object. So to correctly set selected value you have to provide a reference to an object in colors array:

$scope.myclass = $scope.colors[1];

score 1 · Answer 2 · answered Oct 31 '14 at 13:04

1

You can do that by:

$scope.myclass = $scope.colors[1];

please see here http://jsfiddle.net/9d0f8sdj/1/

answered Oct 31 '14 at 13:04

sylwester

16,498
1
25
33

Oskar Lindberg · Answer 3 · 2014-10-31T13:21:15.440

See AngularJS Reference for Select; You do this by selecting the index of the value you want:

angular
    .module('myApp', [])
    .controller('MainCtrl', ['$http', '$scope', '$filter',
        function ($http, $scope, $filter) {

            $scope.colors = [{
                name: '50'
            }, {
                name: '55'
            }, {
                name: '65'
            }, {
                name: '105'
            }, {
                name: '110'
            }, {
                name: '400'
            }, {
                name: '500'
            }];

            $scope.myclass = $scope.colors[2];

        }]);

So, the value you want should also be in the $scope.colors list, like I added it above.

Your fiddle corrected: http://jsfiddle.net/d8kg0uys/1/

score 1 · Answer 4 · edited May 23 '17 at 11:49

You are binding an object to the ng-model, not the object's field. Not that that is bad but comparing objects in javascript is not as simple as it is in other languages. https://stackoverflow.com/a/1144249/1264360

Also 65 is not in your options list so it is defaulting to the default value.

<select data-ng-model="myclass.name" data-ng-options="color.name as color.name for color in colors">
    <option value="">-- Select Freight Class --</option>
</select>

http://plnkr.co/edit/YLFgjILNUC0RP2aBAT6q?p=preview

set selected value for select element angularJS

4 Answers4