<div class="form-group">
  <div>
    <label ng-if="$index < 1 || groupName !== 'buckets'" class="eui-displayInline">Aggregation</label>
    <label ng-if="$index >= 1 && groupName === 'buckets'" class="eui-displayInline">Sub Aggregation</label>
    <a
      ng-if="aggHelpLink"
      href="{{aggHelpLink}}"
      class="pull-right"
      target="_blank"
      rel="noopener noreferrer"
    >
      {{agg.type.title}} help
    </a>
  </div>
  <div class="euiSpacer euiSpacer--s"></div>
  <ui-select
    required
    name="agg"
    class="visEditorAggSelect__select agg-select"
    data-test-subj="visEditorAggSelect"
    ng-model="agg.type"
  >
    <ui-select-match placeholder="Select an aggregation">
      {{$select.selected.title}}
    </ui-select-match>
    <ui-select-choices
      repeat="agg in aggTypeOptions
        | filter: { title: $select.search }
        | orderBy:'title'
        | sortPrefixFirst:$select.search:'title'"
      group-by="'subtype'"
    >
      <div data-test-subj="{{agg.title}}" ng-bind-html="agg.title | highlight: $select.search"></div>
    </ui-select-choices>
  </ui-select>
</div>
