<div class="form-group">
  <div class="input-group">
    <div class="c8y-select-wrapper">
      <select
        aria-label="{{ 'Select data point' | translate }}"
        class="form-control"
        ng-options="kpi.id as getKpiLabel(kpi) for kpi in kpis | orderBy:['label','series']"
        ng-model="kpiId"
        ng-change="onKpiIdSelectionChange(kpiId)"
        ng-required="param.required"
      >
        <option
          value=""
          ng-if="!param.required || !kpiId"
          ng-bind="placeholder(param)"
        ></option>
      </select>
    </div>
    <span class="input-group-btn">
      <button
        class="btn btn-primary"
        aria-label="{{ 'Select data point from library' | translate }}…"
        uib-tooltip="{{ 'Select data point from library' | translate }}…"
        tooltip-popup-delay="500"
        tooltip-append-to-body="true"
        tooltip-append-to-body="true"
        type="button"
        ng-click="openKpiSelector()"
      >
        <i c8y-icon="eyedropper"></i>
      </button>
    </span>
  </div>
</div>