title: Select control not joining/matching up within input-group with 2 other controls (a text input and input-group-btn)
body: <p>I'm trying to create an input-group of 3 controls. The following : </p>
  
  <pre><code>                      1. Filter dropdown of sort (Currently using &lt;select&gt;
                        2. The input text box
                        3. The Search button
  </code></pre>
  
  <p>I've managed to get the latter 2 working as expected, they both join up and appear as expected however when I try to add a select control although in-line it doesn't seem to have the same height as the other 2 controls. I've tried all sorts of combinations and have ran out of ideas to try. </p>
  
  <p><img src="https://i.stack.imgur.com/aRgCX.png" alt="non-matching control heights image"></p>
  
  <p>On the bootstrap documentation they have not shown how to do this with a  but with a dropdown  control however when I tried to do that with  I could not get it to work as the  control does. </p>
  
  <p>Could someone suggest how I could add the filter control? Here is an example of the data in my angular controller $scope.filterOptions = ["test", "test2", "test3"].</p>
  
  <p>What I essentially what to achieve is something similar to that of the bootstrap documentation example : </p>
  
  <p><img src="https://i.stack.imgur.com/XQxCd.png" alt="bootstrap control group"></p>
  
  <p>Here's the non-working html I have at the moment. </p>
  
  <pre><code>&lt;div class="panel-heading clearfix"&gt;
          &lt;form class="input-group col-md-4"&gt;
              &lt;div class="input-group-btn"&gt;
                  &lt;select class="btn btn-default" ng-model="filterOption"&gt;
                      &lt;span class="caret"&gt;&lt;/span&gt;
                      &lt;option ng-repeat="option in filterOptions" value="{{option}}"&gt;{{option}}&lt;/option&gt;
                  &lt;/select&gt;
              &lt;/div&gt;
              &lt;input type="text" ng-model="query" class="form-control" placeholder="Enter ID / Name"&gt;
              &lt;div class="input-group-btn"&gt;
                  &lt;button ng-click="search()" type="submit" class="btn"&gt;&lt;i class="glyphicon glyphicon-search"&gt;&lt;/i&gt;&lt;/button&gt;
              &lt;/div&gt;
          &lt;/form&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>Here's a plunkr I made which shows the same problem : <a href="http://plnkr.co/edit/uDFmFZSbIMBP4DqalhQC?p=preview" rel="nofollow noreferrer">http://plnkr.co/edit/uDFmFZSbIMBP4DqalhQC?p=preview</a></p>