<div class="form-group">
  <label for="visEditorInterval{{agg.id}}">
    Interval
    <kbn-info
      ng-show="agg.buckets.getInterval().scaled"
      placement="right"
      class="text-warning"
      info="This interval creates {{ agg.buckets.getInterval().scale > 1 ? 'buckets that are too large' : 'too many buckets' }} to show in the selected time range, so it has been scaled to {{ agg.buckets.getInterval().description }}">
    </kbn-info>
  </label>
  <select
    id="visEditorInterval{{agg.id}}"
    ng-if="aggParam.options"
    ng-model="agg.params.interval"
    ng-change="agg.write()"
    required
    ng-options="opt as opt.display for opt in aggParam.options.raw | filter: optionEnabled"
    class="form-control"
    name="interval">
    <option value="">-- select a valid interval --</option>
  </select>
  <input
    aria-label="Custom interval"
    type="text"
    name="customInterval"
    ng-model="agg.params.customInterval"
    validate-date-interval
    ng-change="aggForm.customInterval.$valid && agg.write()"
    ng-if="agg.params.interval.val == 'custom'"
    class="form-control"
    required />
  <input
    id="visEditorInterval{{agg.id}}"
    ng-if="!aggParam.options"
    ng-model="agg.params.interval"
    required
    type="number"
    class="form-control"
    name="interval"
    min="0"
    input-number
    >
</div>
