anklickbarer Bereich von ui-select innen ist 10px ein Bootstrap modal

Question

Ich habe ein Bootstrap-modal und, in ihm, ich habe eine UI-Auswahl zum Taggen. Hier ist mein Beispiel:

<div class="modal modal-invite"> 
    <div class="modal-dialog"> 
    <div class="modal-content"> 
     <div class="modal-header"> 
     <button type="button" class="close" data-dismiss="modal" aria-label="Close"> 
      <span aria-hidden="true">&times;</span> 
     </button> 
     </div> 
     <div class="modal-body"> 
     <ui-select multiple tagging tagging-label="" ng-model="email_list" theme="bootstrap" ng-disabled="disabled" on-select="" on-remove="" title="Insert your friends email here." > 
      <ui-select-match placeholder="Your friends email here...">{{$item}}</ui-select-match> 
      <ui-select-choices repeat="email in email_list | filter:$select.search"> 
      {{email}} 
      </ui-select-choices> 
     </ui-select> 
     </div> 
     <div class="modal-footer"> 
     <button class="btn btn-success">Invite</button> 
     </div> 
    </div> 
    </div> 
</div> 

Mein Problem ist: Wenn ich das modale mit $('modal-invite').modal('show') öffnen, die Größe des Platzhalter (und den klickbaren Bereich) 10 Pixel, wie folgt aus:

Nach dem Klicken wird die richtige Breite angezeigt.
Wie kann ich die Größe von ui-select aktualisieren, wenn das Modal geöffnet wird?

Answer 1

Schließlich löste ich die Überprüfung der ui-Select-Quellen.
Es scheint, dass ui-select die Eingabegröße mit einem $watch auf der übergeordneten Breite neu berechnet.

Also, um es zu aktualisieren, habe ich wie folgt aus:

$('.modal-invite').modal('show'); 
$scope.$apply();