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