angular-formly select

async_select.html

<ui-select ng-model="model[options.key]" theme="bootstrap" reset-search-input="false">
	<ui-select-match>{{$select.selected[to.labelProp || 'name']}}</ui-select-match>
  <ui-select-choices repeat="option in to.options | filter: $select.search">
  	<div ng-bind-html="option[to.labelProp || 'name'] | highlight: $select.search"></div>
  </ui-select-choices>
</ui-select>

select.html

<select class="form-control"
        ng-model="model[options.key]"
        ng-options="option[to.valueProp || 'value'] as option[to.labelProp || 'name'] group by option[to.groupProp || 'group'] for option in to.options">
</select>

types.js

'use strict';

/**
 * Custom Templates for angular-formly
 */
angular.module('myapp')
	.config(function config(formlyConfigProvider) {

    /**
     * Custom templates
		 * http://docs.angular-formly.com/v6.4.0/docs/custom-templates
     */

    /*
	    select
     */
    formlyConfigProvider.setType({
      name: 'select',
      overwriteOk: true,
      templateUrl: 'scripts/formly/select.html',
      wrapper: ['bootstrapLabel', 'bootstrapHasError']
    });

    /*
	    async_select
	    Extends select
	    use ui-select (https://github.com/angular-ui/ui-select)
     */
    formlyConfigProvider.setType({
      name: 'async_select',
      extends: 'select',
      templateUrl: 'scripts/formly/async_select.html',
      defaultOptions: {
        templateOptions: {
          options: [],
          valueProp: "value",
          labelProp: "label",
        },
        controller: function($scope, CRUDService) {
          $scope.to.loading = CRUDService.options($scope.to.params).then(function(res) {
            $scope.to.options = res;
            // note, the line above is shorthand for:
            // $scope.options.templateOptions.options = data;
            return res;
          });
        }
        // Alternative: Use ui-select's `refresh` functionality
      }
    });
	});