title: Dropdown of UI-select in table can't overlay next row
body: <p>I have a ui-select in a ng-repeat table, i'm having problem to get the dropdown list of ui-select to overlay the next table row. Currently the next row overlays the dropdown list, look at the img link below. thanks</p>
  
  <pre><code>&lt;table class="table table-bordered" ng-table="tableTest"&gt;
      &lt;tbody&gt;
          &lt;tr ng-repeat="testing in $data"&gt;
              &lt;div&gt;
                  &lt;td data-title="Name"&gt;
                      &lt;input type="text" class="form-control" name="name" ng-model="testing.name" placeholder="Name"&gt;
  
                      &lt;div class="form-group"&gt;
                          &lt;ui-select ng-model="testing.parent" theme="select2" style="width: 100%"&gt;
                              &lt;ui-select-match placeholder="test..."&gt;{{$select.selected.name}}&lt;/ui-select-match&gt;
                              &lt;ui-select-choices repeat="test.name as test in myData | filter: {name: $select.search}"&gt;
                                  &lt;span ng-bind-html="''+test.name | highlight: $select.search | unsafe"&gt;&lt;/span&gt;
                              &lt;/ui-select-choices&gt;
                          &lt;/ui-select&gt;
                      &lt;/div&gt;
                      &lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;
                  &lt;/td&gt;
              &lt;/div&gt;
          &lt;/tr&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>Click 
  <a href="http://i.stack.imgur.com/Nszy6.png" rel="nofollow">Here</a> to see current output Image.</p>
  
  <p>What I want is <a href="http://i.stack.imgur.com/8vVKP.png" rel="nofollow">this</a>, dropdown list overlay the next row</p>
  
  <p>Please assist</p>