<div class="ng-cloak" ng-controller="SelectpickerPanelCtrl as selectpickerVm">
  <div class="form-group">
    <ui-select ng-model="selectpickerVm.selectedItem.selected"
               class="btn-group bootstrap-select form-control"
               ng-disabled="false"
               append-to-body="true"
               search-enabled="false">
      <ui-select-match placeholder="Standard Select">
        <span> {{$select.selected.label}}</span>
      </ui-select-match>
      <ui-select-choices repeat="standardItem in selectpickerVm.standardSelectItems | filter: $select.search">
        <span ng-bind-html="standardItem.label"></span>
      </ui-select-choices>
    </ui-select>
  </div>
  <div class="form-group ">
    <ui-select ng-model="selectpickerVm.withSearchItem.selected"
               class="btn-group bootstrap-select form-control"
               ng-disabled="false"
               append-to-body="true"
               search-enabled="true">
      <ui-select-match placeholder="Select With Search">
        {{$select.selected.label}}
      </ui-select-match>
      <ui-select-choices
          repeat="withSearchItem in selectpickerVm.selectWithSearchItems | filter: $select.search">
        <span ng-bind-html="withSearchItem.label"></span>
      </ui-select-choices>
    </ui-select>
  </div>

  <div class="form-group">
    <ui-select ng-model="selectpickerVm.disableItem.selected"
               class="btn-group bootstrap-select form-control"
               ng-disabled="true"
               append-to-body="true"
               search-enabled="false">
      <ui-select-match placeholder="Disabled Selection">
        <span> {{$select.selected.label}}</span>
      </ui-select-match>
      <ui-select-choices repeat="disableItem in selectpickerVm.disableItems | filter: $select.search">
        <span ng-bind-html="disableItem.label"></span>
      </ui-select-choices>
    </ui-select>
  </div>


  <div class="form-group">
    <ui-select ng-model="selectpickerVm.groupedItems.selected"
               class="btn-group bootstrap-select form-control"
               ng-disabled="false"
               append-to-body="true"
               search-enabled="true">
      <ui-select-match placeholder="Select With Option Groups">
        {{$select.selected.label}}
      </ui-select-match>
      <ui-select-choices
          repeat="groupedItems in selectpickerVm.groupedSelectItems | groupSelectpickerOptions: {label: $select.search}"
          group-by="'group'">
        <span ng-bind-html="groupedItems.label | highlight: $select.search"></span>
      </ui-select-choices>
    </ui-select>
  </div>

  <div class="form-group">
    <ui-select ng-model="selectpickerVm.groupedByItems.selected"
               class="btn-group bootstrap-select form-control"
               ng-disabled="false"
               append-to-body="true"
               search-enabled="true">
      <ui-select-match placeholder="Select With Option Groups Function">
        {{$select.selected.name}}
      </ui-select-match>
      <ui-select-choices
          repeat="groupedByItems in selectpickerVm.groupedBySelectItems | filter: $select.search"
          group-by="selectpickerVm.someGroupFn">
        <span ng-bind-html="groupedByItems.name | highlight: $select.search"></span>
      </ui-select-choices>
    </ui-select>
  </div>


  <div class="form-group">
    <ui-select multiple ng-model="selectpickerVm.multipleItem.selected"
               ng-disabled="false"
               search-enabled="true"
               append-to-body="true"
               class="form-control ">
      <ui-select-match placeholder="Multiple Select">
        {{$item.label}}
      </ui-select-match>
      <ui-select-choices repeat="multipleItem in selectpickerVm.multipleSelectItems | filter: $select.search">
        {{multipleItem.label}}
      </ui-select-choices>
    </ui-select>
  </div>


  <div class="form-group ">
    <div class="input-group">

      <ui-select multiple
                 ng-model="selectpickerVm.withDeleteItem.selected"
                 ng-disabled="false"
                 search-enabled="true"
                 append-to-body="true"
                 class="form-control form-control">
        <ui-select-match placeholder="Select With Clear Button">
          {{$item.label}}
        </ui-select-match>
        <ui-select-choices
            repeat="withDeleteItem in selectpickerVm.withDeleteSelectItems | filter: $select.search">
          {{withDeleteItem.label}}
        </ui-select-choices>
      </ui-select>
      <span class="input-group-btn">
        <button type="button" ng-click="selectpickerVm.withDeleteItem.selected = undefined"
               class="btn btn-danger">
          <span class="glyphicon glyphicon-trash"></span>
        </button>
      </span>
    </div>
  </div>
</div>
