Ajax select in angular.js using ui-select

ajax-select.html

<div class="row search-select-group">
  <div class="search-select"
  ng-class="{'col-xs-12': !ajs.allowClear, 'col-xs-11': ajs.allowClear}">
    <ui-select ng-model="ajs.model" append-to-body="true">
      <ui-select-match allow-clear="ajs.allowClear"
      placeholder="{{ajs.placeholder}}">
        {{$select.selected[ajs.displayField]}}
      </ui-select-match>
      <ui-select-choices
        repeat="objs[ajs.modelField] as obj in ajs.lookup | filter: $select.search"
        refresh="ajs.match($select.search)"
        refresh-delay=0>
        <div ng-bind-html="obj[ajs.displayField] | highlight: $select.search">
        </div>
      </ui-select-choices>
    </ui-select>
  </div>
  <div class="col-xs-1 search-clear-select"
  ng-if="ajs.allowClear"
  ng-click="ajs.model = undefined">
    &#10006;
  </div>
</div>

ajax-select.js

app.controller(`AjaxSelectController`, function($API) {
  if (angular.isDefined(this.model)) {
    const query = {
      filter: [`${this.modelField} eq ${this.model}`],
    };
    $API.get(this.resource, formatQuery(query)).then((response) => {
      this.activities = response.body.Data;
    });
  }
  this.match = (filter) => {
    const query = {
      top: this.top || 5,
      filter: [`substringof('${filter}', ${this.queryParam})`],
    };
    $API.get(this.resource, formatQuery(query)).then(({body}) => {
      this.lookup = body.Data;
    });
  };
});

app.directive(`ajaxSelect`, () => {
  return {
    restrict: `E`,
    templateUrl: `/views/directives/ajax-select.html`,
    controller: `AjaxSelectController as ajs`,
    bindToController: true,
    scope: {
      resource: `@`,
      queryParam: `@`,
      top: `@`,
      modelField: `@`,
      displayField: `@`,
      placeholder: `@`,
      model: `=`,
      allowClear: `=`,
    },
  };
});