clickable area ui-select inside - 10px bootstrap modal

Question

У меня есть загрузочный модальный, и внутри него у меня есть ui-select для тегов. Вот мой пример:

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

Моя проблема: Когда я открываю модальное с $('modal-invite').modal('show'), размер заполнителя (и активная область) составляет 10 пикселей, как это:

После нажатия на него он получает правильную ширину.
Как я могу сделать ui-select обновить его размер, когда модаль открывается?

Answer 1

Наконец-то я решил проверить источники ui-select.
Кажется, что ui-select пересчитывает размер ввода с помощью $watch на ширину родительского элемента.

Итак, для того, чтобы обновить его, я сделал так:

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