<!-- on-select/on-remove are called with model because ui-select uses 2-way-binding -->
<ui-select
  multiple
  ng-model="$ctrl.model"
  close-on-select="false"
  on-select="$ctrl.onChange($ctrl.model)"
  on-remove="$ctrl.onChange($ctrl.model)"
  data-cy="edgeGroupCreate-edgeGroupsSelector"
>
  <ui-select-match placeholder="Select one or multiple group(s)">
    <span>
      {{ $item.Name }}
    </span>
  </ui-select-match>
  <ui-select-choices repeat="item.Id as item in $ctrl.items | filter: { Name: $select.search }">
    <span>
      {{ item.Name }}
    </span>
  </ui-select-choices>
</ui-select>
