demo-select2-with-bootstrap.html

  <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="select2" class="form-control" 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">Multiple</label>
        <div class="col-sm-6">

          <ui-select multiple sortable="true" ng-model="ctrl.person.selected" theme="select2" class="form-control" 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="select2" class="form-control" 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="'group'" 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 select2-bootstrap-append">

            <ui-select ng-model="ctrl.person.selected" theme="select2" class="form-control" 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">
                <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">Disabled</label>
        <div class="col-sm-6">

          <ui-select ng-model="ctrl.person.selected" theme="select2" 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>