Angularjs select list not initialize default value

Question

I have 2 select lists:

<select class="input-large" ng-model="bu.box.categoryId" ng-change="getSubCats()">
   <option ng-repeat="cat in cats" value="{{cat.id}}">{{cat.name}}</option>
</select>

 <select class="input-large" ng-model="bu.box.subCategoryId">
    <option ng-repeat="subcat in subCats" value="{{subcat.id}}">{{subcat.name}}</option>
</select>

The object bu, subcats is injected to my controller from resolve and exists before bindings is render and cats i get from local storage:

$stateProvider.state('box',
            {
                url: '/box-card/:id',
                templateUrl: '/partials/main.module/contollers/box.html?v=' + global_app_version,
                controller: 'BoxController as boxCtrl',
                resolve: {
                    Box: function ($stateParams, httpService) {
                        return httpService.getBox({ boxid: $stateParams.id });
                    }
                }
            })

Controller variables initialization look like this:

function boxController($scope, localStorageService, httpService, $state, appData, uiGridConstants, $modal, helpersService, $stateParams, $sce, Box) {
        $scope.bu = Box.data.bu;
        $scope.cats = localStorageService.get("cats");
        $scope.subCats = Box.data.currentSubCats;
............

var controllers = angular.module('app.controllers');
controllers.controller('BoxController', boxController);

The problem is, when the select lists is rendered, they not initialized correctly, The first option is selected instead of relevant initialization by ng-model. What happen here? Why is not working correctly? I checked all variables in debug, all fine... Need help here.

You should use ng-options instead of ng-repeat this should resolve the issue. ng-options — Max Novich
– Max Novich, Commented Jun 3, 2015 at 8:25
<select ng-options="cat.name for cat in cats track by cat.id" class="input-large" ng-model="bu.box.categoryId" ng-change="getSubCats()"> This not solve the problem — freethinker
– freethinker, Commented Jun 3, 2015 at 8:40

Mikalai · Accepted Answer · 2015-06-03 08:25:57Z

1

Try to solve the problem with ng-selected.

answered Jun 3, 2015 at 8:25

Mikalai

1,5258 silver badges21 bronze badges

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

3 Comments

freethinker Over a year ago

I added ng-selected to options like this: <option ng-repeat="cat in cats" ng-selected="{{bu.box.categoryId == cat.id ? 'selected' : ''}}" value="{{cat.id}}">{{cat.name}}</option> This put ng-selected="selected" on correct option. But still first option from select list is selected

Mikalai Over a year ago

I think it should be <option ng-repeat="cat in cats" ng-selected="bu.box.categoryId === cat.id" value="{{cat.id}}">{{cat.name}}</option>

freethinker Over a year ago

You are right! It works now. It steel interesting why ng-model not initialize default value, but thanks all works fine now :)

Adam Michalski · Accepted Answer · 2015-06-03 09:12:32Z

0

<select class="input-large" ng-model="bu.box.categoryId" ng-init="cat = cats[0]" ng-change="getSubCats()">
   <option ng-repeat="cat in cats" value="{{cat.id}}">{{cat.name}}</option>
</select>

 <select class="input-large" ng-model="bu.box.subCategoryId" ng-init="subcat = subCats[0]">
    <option ng-repeat="subcat in subCats" value="{{subcat.id}}">{{subcat.name}}</option>
</select>

I use in my project ng-init like ng-init="subcat = subCats[0]" change the subCats[0] and cats[0] for your init values

answered Jun 3, 2015 at 9:12

Adam Michalski

1,7923 gold badges17 silver badges40 bronze badges

Comments

Community · Accepted Answer · 2020-06-20 09:12:55Z

0

Try using $scope.$apply() .

From the article:

If you write any code that uses Ajax without $http, or listens for events without using Angular’s ng-* listeners, or sets a timeout without $timeout, you should wrap your code in $scope.$apply

It looks like exactly your case. Box is updated in a background request and angular listeners do not know that it was updated.

UPD1

Also Just noticed that the problem could hide here $scope.bu is initialized before $scope.cats so model actually tries to match a still empty list of options.

upd2

just noticed in the comment that ng-options binding was a bit off. try using

<select ng-options="cat.name for cat.id in cats track by cat.id" class="input-large" ng-model="bu.box.categoryId" ng-change="getSubCats()">

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered Jun 3, 2015 at 8:53

Max Novich

1,1699 silver badges20 bronze badges

1 Comment

freethinker Over a year ago

Maksym Stepanenko thanks for reply. $scope.$Apply() not help here. Also i tried to move initialization of $scope.bu after $scope.subCats and $scope.cats, and this is not help

Collectives™ on Stack Overflow

Angularjs select list not initialize default value

3 Answers 3

3 Comments

Comments

UPD1

upd2

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

Comments

UPD1

upd2

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related