Set Selected Option In Dropdown in AngularJS onload

Question

In Angularjs, I have a DropDown:

<select ng-model="category" ng-change="categoryChanged(category)" class="form-control" 
data-ng-options="category as category.name for category in categories">
        <option value="">Select Category</option>
</select>

And I have a controller:

app.controller('searchBoxController', ['$scope', '$location', '$routeParams', 'categoryService', function ($scope, $location, $routeParams, categoryService) {
        categoryService.getParentCategory().$promise.then(
        function (model) {
            $scope.categories = model;
            $scope.category.id = $routeParams.categoryId;// Which is coming as "1"
        },
        function (error) {

        });

        $scope.categoryChanged = function (category) {
             alert(category.id);
        };
}]);

$routeParams.categoryId is coming as "1" but still it is not setting the selected option in the dropdown.

Possible duplicate of [How do I set default value of select box in angularjs](http://stackoverflow.com/questions/18380951/how-do-i-set-default-value-of-select-box-in-angularjs) — xkcd149, Jan 18 '17 at 08:16
You have to declare `$scope.category = {};` at the beginning of your controller. — Mistalis, Jan 18 '17 at 08:17
@xkcd149 Sorry to say but my question is not duplicate. I had only id from $routeParams whereas the question which is marked as duplicate is focusing on whole object. — Usman Khalid, Jan 18 '17 at 09:39

devqon · Answer 1 · 2017-01-18T08:23:32.430

Your categories variable is an array of objects, while you set the ng-model to an object with only an id. Because it is a whole new object, angular doesn't see it as a match of the category in your array, and won't select the correct one.

The solution is to set the $scope.category to the matching object of the array instead of creating a new one:

var id = $routeParams.categoryId;
// Find the category object with the given id and set it as the selected category
for (var i = 0; i < $scope.categories.length; i++){
    if ($scope.categories[i].id == id) {
        $scope.category = $scope.categories[i];
    }
}

Mihai Alexandru-Ionut · Accepted Answer · 2017-01-18T08:40:43.273

0

You have to change ng-model directive when promise operation is end.

<select  ng-model="category" ng-change="categoryChanged(category)" class="form-control" data-ng-options="category as category.name for category in categories">
    <option value="">Select Category</option>
</select>

Suppose you have var id = $routeParams.categoryId and its value is 2 for example. You have to find category from categories where category.id is 2. For this, the simpliest method is to use a filter method.

$scope.category = $scope.categories.filter(function(item){
        return item.id==$scope.id;
})[0];

Please take a look to working fiddle

edited Jan 18 '17 at 08:40

answered Jan 18 '17 at 08:18

Mihai Alexandru-Ionut

47,092
13
101
128

1

I was not the downvoter, but I can see your given solution doesn't solve OP's question. You just set the `category` to the first item of the array instead of the one with the given id of the `$routeParams` – devqon Jan 18 '17 at 08:29

Set Selected Option In Dropdown in AngularJS onload

2 Answers2