ui-select doesn't show select-choices in modal window from $scope array of objects

[Exiliot]

I faced with such problem: ui-select doesn't work normally in Angular-Bootstrap modal window if the array of objects for select-choices is defined directly in the modal controller. If the array is returned by $http request - ui-select works good. Why is it so?

[lugithub]

i have the same problem.

[dimirc]

Can you setup a plunker?

[krtek]

I can confirm this bug too.

[jbonigomes]

+1

[jbonigomes]

I know this is a hack, but @DeezCashews temporary solution is working for me:

#1126

[krtek]

@jbonigomes Thanks! This workaround works.

[jbonigomes]

Great stuff @krtek

[DeezCashews]

Glad it could help. If you get a chance please upvote at http://stackoverflow.com/questions/29893423/angular-ui-select-is-not-displaying-the-list-of-options-when-included-in-angular/31886971#31886971 so others can find solution easier on SO.

[jbonigomes]

yes @DeezCashews, will do

[captify-ddavydov]

Error occurs here in select.js:
(line 610: ctrl.searchInput.css('width', '10px');)

In this case input tag has width: 10px. You can click in this 10px-area - and it will work. As we use this lib via bower - I've fix it without touching source in the following way:

{{::$item.name}}

so, if model array is empty - just make width of input 100%. We use 'select2' theme

.empty.ui-select-match + .select2-search-field,
.empty.ui-select-match + .select2-search-field input{
width: 100% !important;
}

[jbonigomes]

thanks @captify-ddavydov this also works for me

[wesleycho]

Closing due to lack of reproduction in Plunker - feel free to open a new issue if this is still a problem with reproduction.

[vylan]

Met this problem too, all the above solutions didn't work for me. I fixed it by replace the isNil function in select.js with:
function isNil(value) { return angular.isUndefined(value) || value === null || !Object.keys(value).length; }

[trd-warren]

I also met this problem while using ui-modal and I solve this using 'ng-class' condition to the ui-select-choices directive:

modal.html

<ui-select ng-model="person.selected" theme="bootstrap" on-select="onSelect($item)" ng-click="select_open = true">
    <ui-select-match placeholder="制作者">{{$select.selected.name}}</ui-select-match>
    <ui-select-choices repeat="item in people | propsFilter: {name: $select.search, email: $select.search}" ng-class="{ 'select_open': select_open }">
        <div ng-bind-html="item.name | highlight: $select.search"></div>
        <small ng-bind-html="item.email | highlight: $select.search"></small>
    </ui-select-choices>
    <ui-select-no-choice>
        一致するものは見つかりませんでした。
    </ui-select-no-choice>
</ui-select>

app.js

$scope.onSelect = function(item) {
    $scope.open_select = false;
	}

style.css

.select_open {
	opacity: 1 !important;
}

Hope it helps. 👍