选择选择选项[selected-drop]切断bootstrap表响应

Question

我在bootstrap表中的ng-repeat中选择了select有问题，在selected-drop选项里面进入table-responsive下面的图像

我可以通过改变CSS来实现这个目标

.table-responsive{
    overflow:visible !important;
}

如下图所示

我的问题是我不想更改overflow:visible，因为表格宽度为1700px因此表格可滚动是否有任何选项可以克服这个问题？

var app = angular.module('testApp',['localytics.directives']);
    app.controller('testCtrl',function($scope){
      $scope.items=[{id:1},{id:2},{id:3},{id:4}];
      $scope.selectitems=[{id:1,name:"One"}];
});

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.8.3/chosen.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.8.3/chosen.jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-chosen-localytics/1.8.0/angular-chosen.js"></script>
<div ng-app="testApp" ng-controller="testCtrl">
    <div class="table-responsive">
      <table class="table table-bordered" style="width:1700px">
        <thead>
          <tr>
            <th></th>
            <th></th>
            <th></th>
            <th></th>
            <th></th>
          </tr>
        </thead>
        <tbody>
          <tr ng-repeat="a in items">
            <td class="col-md-1">{{$index+1}}</td>
            <td class="col-md-2"><select class="chosen-select input-sm form-control full-width" data-chosen="" data-ng-model="a.id" data-ng-options="item.id as item.name for item in selectitems" required><option value="">Select</option></select></td>
            <td></td>
            <td></td>
            <td></td>
          </tr>
        </tbody>
      </table>
    </div>
</div>

codepen working link