Pole wprowadzania Bootstrap w rozwijanym menu z AngularJS

Question

Mam menu rozwijane przy użyciu Bootstrap, a wewnątrz niego znajduje się pole wprowadzania. Za każdym razem, gdy klikam pole wprowadzania, menu rozwijane znika. Jak mógłbym to zatrzymać?

Nawiasem mówiąc, używam AngularJS, więc sposób jQuery prawdopodobnie nie będzie tu pasował.

<div class="dropdown"> 
    <button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown"> 
     <span class="pull-left">{{ trans('text.choose_user') }}</span> 
     <span class="pull-right"><i class="icon-order-table"></i></span> 
    </button> 
    <ul class="dropdown-menu" role="menu"> 
     <li role="presentation" class="basic-padding"><a role="menuitem" tabindex="-1" href="#">{{ trans('text.guest') }}</a></li> 
     <li class="basic-padding"> 
      <div class="input-group"> 
       <input type="search" class="form-control" placeholder="{{ trans('text.search') }}"> 
       <span class="input-group-btn"> 
        <button class="btn btn-default"> 
         <i class="icon-search"></i> 
        </button> 
       </span> 
      </div> 
     </li> 
    </ul> 
</div> 

Answer 1

Powinieneś spróbować użyć kątowego ui-select. Oto link github

Link do plunker demo

przejść przez dokumentacji i istnieje kilka opcji do skonfigurowania ui-select.

Przykładowy kod skonfigurować ui-select

<ui-select ng-model="person.selected" theme="bootstrap" style="min-width: 300px;"> 
    <ui-select-match placeholder="Select a person...">{{$select.selected.name}}</ui-select-match> 
    <ui-select-choices repeat="person in people | propsFilter: {name: $select.search}"> 
    <div ng-bind-html="person.name | highlight: $select.search"></div> 
    </ui-select-choices> 
</ui-select> 

Answer 2

Dzięki @Rob J, mam wymyślić rozwiązania, a nie dokładnie tak, jak co wspomniał jednak:

<input type="search" class="form-control" placeholder="{{ trans('text.search') }}" ng-click="$event.stopPropagation()">