title: Bootstrap input field in dropdown with AngularJS
body: <p>I have a dropdown menu using Bootstrap and inside it, there is an input field. Everytime I click the input field, the dropdown menu disappears. How would I stop that? </p>
  
  <p>By the way, I'm using AngularJS, so jQuery way probably won't fit in here.</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;div class="dropdown"&gt;
      &lt;button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown"&gt;
          &lt;span class="pull-left"&gt;{{ trans('text.choose_user') }}&lt;/span&gt; 
          &lt;span class="pull-right"&gt;&lt;i class="icon-order-table"&gt;&lt;/i&gt;&lt;/span&gt;
      &lt;/button&gt;
      &lt;ul class="dropdown-menu" role="menu"&gt;
          &lt;li role="presentation" class="basic-padding"&gt;&lt;a role="menuitem" tabindex="-1" href="#"&gt;{{ trans('text.guest') }}&lt;/a&gt;&lt;/li&gt;
          &lt;li class="basic-padding"&gt;
              &lt;div class="input-group"&gt;
                  &lt;input type="search" class="form-control" placeholder="{{ trans('text.search') }}"&gt;
                  &lt;span class="input-group-btn"&gt;
                      &lt;button class="btn btn-default"&gt;
                          &lt;i class="icon-search"&gt;&lt;/i&gt;
                      &lt;/button&gt;
                  &lt;/span&gt;
              &lt;/div&gt;
          &lt;/li&gt;
      &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>