Angular ui-select placeholder not working when ng-model is initalized from the server (config.actions in this case)

[anatlerner]

<div ng-repeat="action in config.actions track by $index" class="action-select">
                        <ui-select
                            reset-search-input
                            ng-model="action"
                            theme="bootstrap"
                            on-select = "selectAction($item,$model)"
                            ng-disabled="disabled">
                            <ui-select-match placeholder="choose an action">{{$select.selected.name}}</ui-select-match>
                            <ui-select-choices  repeat="item in items | filter:$select.search">
                                    {{item.name}}
                            </ui-select-choices>
                        </ui-select>

        </div>

[user378230]

Closing due to lack of repro and meaningful detail.

Please update this issue with plunkr or similar against the latest version and some more information if there is still a problem.

[Hreinnr]

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

I managed to reproduce the problem, by editing the "Basic" example, and adding the following code:

$scope.semesters = [{ ID: "20151", Name: "Spring 2015" },{ ID: "20152", Name: "Summer 2015" },{ ID: "20153", Name: "Fall 2015" },{ ID: "20161", Name: "Spring 2016" },{ ID: "20162", Name: "Summer 2016" }]; $scope.selectedSemester = "20161";

and the following markup:

<ui-select ng-model="selectedSemester"> <ui-select-match placeholder="Select semester..."> {{$select.selected.Name}} </ui-select-match> <ui-select-choices repeat="i in semesters | filter: $select.search" value="{{i.ID}}"> <div>{{i.Name}}</div> </ui-select-choices> </ui-select>

both at the bottom of the corresponding .js and .html files.

When the page opens, the placeholder is not displayed.

Any idea why?

[danielbsig]

+1

[user378230]

@Hreinnr your ngModel is incorrect, it should be <ui-select ng-model="ctrl.selectedSemester">

[Hreinnr]

@user378230 but if i put vm.selectedSemester = "20161"; in demo.js and then it has the same problem

[Conner05]

fyi - this is still an issue. The workaround I've found is to modify the width of the input created

.ui-select-multiple input.ui-select-search { width:100% !important; cursor: pointer; }
or
.ui-select-multiple input.ui-select-search { width:auto !important; cursor: pointer; }

Either way, you end up with sizing problems after selecting one or more options.

EDIT: You need to update ui-select and bootstrap in order to fix the problem.