Angular ui-select is not displaying the list of options when included in angular-ui-bootstrap modal

I ran into this (or something similar) with ngDialog. I fixed my problem by adding a ng-hide attribute like so:

<ui-select-choices repeat="..." ng-hide="!$select.open">

This fixed the problem that I had where select-choices was given a ng-hide empty attribute by the component for some reason internally when in a dialog. Hope this helps you workaround this issue as well.

Need to add the attribute: append-to-body="false" or if you only have to, change in CSS:

body > .ui-select-bootstrap.open {
    z-index: 1100; /* greater then ui bootstrap modal, that 1050 */
}

In the $templateCache at the bottom of select.js of ui-select, the first template is 'bootstrap/choices.tpl.html', in which 'ng-show=\"$select.items.length > 0\"' is present, what this does is to hide the dropdown list from appearing when there is no choices to display.

I figured that your problem is because when ui-select is rendering in the modal, the collection(in your case addresses) is empty and therefore its length is 0, as a result 'ng-hide' class is added to the element, causing the problem.

My way of hacking it is simply remove the 'ng-show=\"$select.items.length > 0\"', or change it to 'ng-show=\"$select.items.length >= 0\"'(making it useless). The side affect is that the dropdown will show an empty bank list when there is no choices to display. I rather like the side affect, it gives the user assurance that the list is working.

The height of the empty list is however too narrow and so I would add a css class to make the empty list a little higher:

.ui-select-choices{ min-height: 30px; }

Thanks for all your responses for my question. Actually i was trying a lot to fix this issue for long and finally i myself figured out that it is somewere an issue with AngularJS i guess. Yes, i was able to fix this by just updating the version of AngularJS from 1.2.16 to 1.2.20. And the working link is here

<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.js"></script>

to

<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.20/angular.js"></script>

and also a minor fix of below

<div ng-bind-html="address.a | highlight: $select.search"></div>

to

<div ng-bind-html="address.name | highlight: $select.search"></div>

If you change the line to be:

<ui-select-choices repeat="address.name in addresses track by $index" refresh-delay="0">

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

it displays the name of the address.

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:

<ui-select-match placeholder="placeholder..." ng-class="{empty: !account.roles.length}">{{::$item.name}}</ui-select-match>

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;
}

I had the same issue, I fix it by adding the attribute append-to-body="false".

<ui-select title="Origem" ng-disabled="disabled" append-to-body="false">
 ...
</ui-select>

I had a similar issue. I solved it by replacing ng-show with ng-if

<button ng-click="toggle=!toggle">Toggle</button>
<div ng-if="toggle">
    <ui-select multiple ng-model="data.projectStatusArray" theme="bootstrap" ng-disabled="disabled" style="margin:0px;">
        <ui-select-match class="ui-font-medium" placeholder="Choose Filter"> {{$item.display_name}} </ui-select-match>
        <ui-select-choices repeat="fl.name as fl in filterByArray | filter: $select.search">
            {{fl.display_name}}
        </ui-select-choices>
    </ui-select>
</div>

I had the same issue, solved it with:

<div class="row" ng-controller="*protopathyUISelectCtrl as ctrl*">
  <div class="form-group m-b-sm required col-md-4 col-xs-3" >
      <div class="input-group">
        <span class="input-group-addon">test</span>
        <ui-select ng-model="ctrl.country.selected" theme="bootstrap" title="Choose a country" ng-disabled="disabled" append-to-body="false">
          <ui-select-match placeholder="test">{{$select.selected.name}}</ui-select-match>
          <ui-select-choices repeat="country in ctrl.countries | filter: $select.search">
            <span ng-bind-html="country.name | highlight: $select.search"></span>
            <small ng-bind-html="country.code | highlight: $select.search"></small>
          </ui-select-choices>
        </ui-select>
      </div>
  </div>
</div>