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

angularjs angular-ui-bootstrap bootstrap-modal ui-select
Dhana Sekar picture Dhana Sekar · Apr 27, 2015 · Viewed 16.7k times · Source

I am facing an issue with the anular-ui-bootstrap modal directive. Am using the angular's ui-select component in my app as a replacement for the html select. This ui-select is working fine in any page it is being included. But when i tried to include it in a modal pop up(using ui-bootstrap $modal service), the drop-down is not displaying the options

The issue is reproduced here

Any help would be much appreciated. Thanks in advance.

Answer

DeezCashews picture DeezCashews · Aug 7, 2015

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.

Related questions

Create a simple Bootstrap Yes/No confirmation or just notification alert in AngularJS

It's so simple in a non-Angular environment. Just html and a two line of js code to show a modal confirmation dialog on the screen. Now I am developting an AngularJS project in which I am using ui-bootstrap modal confirmation …

Read More
Angular Bootstrap Modal leaves backdrop open

I'm using AngularUI to integrate Bootstrap components in my Angular 1.4 app, such as Modals. I'm calling a Modal in my controller like so: var modalInstance = $modal.open({ animation: true, templateUrl: '/static/templates/support-report-modal.html', controller: 'ModalInstanceCtrl' }); Unfortunately, when I …

Read More
Angularjs ui bootstrap: how to vertical center modal component?

Recently I am learning angularjs. I have used bootstrap before. With jquery, I can easily change the position of the modal component position to make it vertical align. Now with angularjs, it seems not very easy to do that. Here …

Read More