jquery - bootstrap input-group not grouping -

i'm trying use input-group group these 2 divs looks this, first item being dropdown select.

what looks now

i've heard bootstrap doesn't work using select inside of here. possible in here?

how can 2 being next each other first pic?

p.s. @ structure please, remove names of stuff because proprietary.

thanks!

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>  <div class="input-group">    <div class="col-md-4 col-sm-3" ng-init="vm.current = vm.interval">      <select class="form-control" ng-model="vm.current" ng-options="interval.set interval in vm.intervals"></select>    </div>    <ng-form name="intervalsform">      <div class="col-md-5 col-sm-9" ng-repeat="interval in vm.intervals" ng-show="vm.current == interval">        <ng-form name="singleform">          <input type="text" class="form-control" placeholder="hh:mm:ss" name="single" id="interval" ng-model="vm.interval" ng-pattern="/^\d{2}:\d{2}:\d{2}$/" ng-class="{inputerror: single.interval.$error.pattern && intervalform.interval.$dirty || single.interval.$invalid || vm.settings.$submitted && intervalform.interval.$invalid}" required/>        </ng-form>      </div>    </ng-form>    <span class="input-error-span" ng-show="(intervalsform.$dirty || intervalsform.$invalid) && intervalsform.$invalid">{{ vm.validationmessages.intervalhhmm }}:ss</span>  </div>

you can below:

.form-control .form-control {      border:0;  }

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>    <div class="input-group">    <span class="input-group-addon">      <select></select>    </span>    <input type="text" class="form-control">  </div>

try customize code looks this.