demo-selectize-with-bootstrap.html

  <style>
    body {
      padding: 15px;
    }

    .selectize-control {
      /* Align Selectize with input-group-btn */
      top: 2px;
    }

      .selectize-control > .selectize-dropdown {
        top: 34px;
      }

    /* Reset right rounded corners, see Bootstrap input-groups.less */
    .input-group > .selectize-control > .selectize-input {
      border-bottom-right-radius: 0;
      border-top-right-radius: 0;
    }
  </style>
  <p>Selected: {{ctrl.person.selected.name}}</p>

  <form class="form-horizontal">
    <fieldset>
      <legend>ui-select inside a Bootstrap form</legend>

      <div class="form-group">
        <label class="col-sm-3 control-label">Default</label>
        <div class="col-sm-6">

          <ui-select ng-model="ctrl.person.selected" theme="selectize" title="Choose a person">
            <ui-select-match placeholder="Select or search a person in the list...">{{$select.selected.name}}</ui-select-match>
            <ui-select-choices repeat="item in ctrl.people | filter: $select.search">
              <div ng-bind-html="item.name | highlight: $select.search"></div>
              <small ng-bind-html="item.email | highlight: $select.search"></small>
            </ui-select-choices>
          </ui-select>

        </div>
      </div>

      <div class="form-group">
        <label class="col-sm-3 control-label">Grouped</label>
        <div class="col-sm-6">

          <ui-select ng-model="ctrl.person.selected" theme="selectize" title="Choose a person">
            <ui-select-match placeholder="Select or search a person in the list...">{{$select.selected.name}}</ui-select-match>
            <ui-select-choices group-by="'country'" repeat="item in ctrl.people | filter: $select.search">
              <span ng-bind-html="item.name | highlight: $select.search"></span>
              <small ng-bind-html="item.email | highlight: $select.search"></small>
            </ui-select-choices>
          </ui-select>

        </div>
      </div>

      <div class="form-group">
        <label class="col-sm-3 control-label">With a clear button</label>
        <div class="col-sm-6">
          <div class="input-group">

            <ui-select ng-model="ctrl.person.selected" theme="selectize">
              <ui-select-match placeholder="Select or search a person in the list...">{{$select.selected.name}}</ui-select-match>
              <ui-select-choices repeat="item in ctrl.people | filter: $select.search">
                <span ng-bind-html="item.name | highlight: $select.search"></span>
                <small ng-bind-html="item.email | highlight: $select.search"></small>
              </ui-select-choices>
            </ui-select>

            <span class="input-group-btn">
              <button type="button" ng-click="ctrl.person.selected = undefined" class="btn btn-default">
                <span class="glyphicon glyphicon-trash"></span>
              </button>
            </span>

          </div>
        </div>
      </div>

      <div class="form-group">
        <label class="col-sm-3 control-label">Multiple</label>
        <div class="col-sm-6">

          <ui-select ng-model="ctrl.person.selected" multiple theme="selectize" title="Choose a person">
            <ui-select-match placeholder="Select or search a person in the list...">{{$item.name}}</ui-select-match>
            <ui-select-choices repeat="item in ctrl.people | filter: $select.search">
              <div ng-bind-html="item.name | highlight: $select.search"></div>
              <small ng-bind-html="item.email | highlight: $select.search"></small>
            </ui-select-choices>
          </ui-select>

        </div>
      </div>

      <div class="form-group">
        <label class="col-sm-3 control-label">Disabled</label>
        <div class="col-sm-6">

          <ui-select ng-model="ctrl.person.selected" theme="selectize" class="form-control" ng-disabled="true" title="Choose a person">
            <ui-select-match placeholder="Select or search a person in the list...">{{$select.selected.name}}</ui-select-match>
            <ui-select-choices repeat="item in ctrl.people | filter: $select.search">
              <div ng-bind-html="item.name | highlight: $select.search"></div>
              <small ng-bind-html="item.email | highlight: $select.search"></small>
            </ui-select-choices>
          </ui-select>

        </div>
      </div>

    </fieldset>
  </form>