<div class="form-group">
  <label>
    Field
  </label>

  <ui-select
    title="Aggregation Field"
    name="field"
    required
    class="visEditorAggSelect__select field-select"
    ng-show="indexedFields.length"
    ng-model="agg.params.field"
    on-select="aggParam.onChange(agg)"
    uis-open-close="limit = 100"
  >
    <ui-select-match placeholder="Select a field">
      {{$select.selected.displayName}}
    </ui-select-match>
    <ui-select-choices
      group-by="'type'"
      kbn-scroll-bottom="limit = limit + 100"
      repeat="field in indexedFields | filter: { displayName: $select.search } | sortPrefixFirst:$select.search:'name' | limitTo: limit"
    >
      <div
        data-test-subj="{{field.displayName}}"
        class="eui-textTruncate"
        ng-bind-html="field.displayName | highlight: $select.search"
        title="{{field.displayName}}"
      ></div>
    </ui-select-choices>
  </ui-select>

  <div class="hintbox" ng-if="!indexedFields.length">
    <p>
      <i class="fa fa-danger text-danger"></i>
      <strong>No Compatible Fields:</strong> The "{{ agg.getIndexPattern().title }}" index pattern does not contain any of the following field types: {{ agg.type.params.byName.field.filterFieldTypes | commaList:false }}
    </p>
  </div>

</div>
