Angular Ui bootstrap dropdown split-button issue with table

I have an angular app , and have integrated angular-ui-bootstrap , my issue is that the dropdown links are are being blocked by table row , using z-index :

 <div class="panel panel-default">
     <div class="panel-body">
        <div class=" pull-right">
             <!-- Split button -->
            <div class="btn-group invoice_new_item_btn_ul" uib-dropdown>
              <button id="split-button" type="button" class="btn btn-danger"> Add Item </button>
              <button type="button" class="btn btn-danger" uib-dropdown-toggle>
              <span class="caret"></span>
            </button>
               <ul class="invoice_new_item_btn_ul uib-dropdown-menu" role="menu" aria-labelledby="split-button">
                   <li role="menuitem"><a href="" ng-click="vm.addNewChoice()">Action</a></li>
                     </ul>
                     </div>
                    </div>


                <div class="table-responsive">
                    <table class="table table-striped" >

                        <thead>
                        <tr>

                            <th></th>
                            <th>Item Name</th>
                            <th>Type</th>


                        </tr>

                        </thead>
                        <tbody id="search_result">

                        <tr class="odd gradeX" ng-repeat="u in vm.patient.patient_finance_item">
                                <td></td>
                                <td ng-bind="u.item_name"></td>
                                <td ng-bind="u.item_type"></td>



                            </tr>
                        </tbody>
                    </table>
                </div>
                </div>
                </div>

The css/sass :

.invoice_new_item_btn_ul{
  z-index:1000 !important;
}