vc-select.html

<label class="vc-form-control"> 
  <span ng-if="enableLabel" class="vc-form-control_label">{{ label | translate }}</span>
  <ui-select ng-model="$parent.chosen"
             search-enabled="true"
             ng-required="$parent.required"
             uib-tooltip="{{ tip | translate }}"
             tooltip-placement="right-top"
             tooltip-class="vc-form-control_tooltip"
             tooltip-trigger="none"
             tooltip-is-open="{{ tooltipOpen }}"
             class="vc-form-control_input">
    <ui-select-match>
      {{ optionToText($parent.chosen) }}
    </ui-select-match>
    <ui-select-choices repeat="option in options | filter: filterer($select.search)">
      <span>{{ $parent.optionToText(option) }}</span>
    </ui-select-choices>
  </ui-select>
</label>

vc-select.js

'use strict';

/**
 * @ngdoc directive
 * @name trafficApp.directive:vcSelect
 * @description
 * # Labelled dropdown.
 * Essentially a wrapper for ui-select, with a (translated) label.
 */
angular.module('trafficApp').directive('vcSelect', function($rootScope) {

  var DEFAULT_DISPLAY_KEY = 'name';

  return {
    replace: true,
    restrict: 'E',
    scope: {
      //Label to show
      label: '=?',
      // The options to display
      options: '=',
      // The selected option
      chosen: '=',
      // The 'display Key', e.g. if the options [{id: 1, name: 'A'}, {id: 2, name: 'B'}] will be displayed as ['A', 'B']
      // if the displayKey is 'name'.  Defaults to 'name'.
      // To use no key, set `no-key="true"` attribute.
      displayKey: '=?',
      // Whether the item is required.  Defaults to true.
      required: '=?',
      // Tooltip to display on the input. When empty string none will be
      // displayed. Name "tip" instead of "tooltip" used, because the latter is
      // the name of Bootstrap directive (which gets invoked then).
      tip: '=?'
    },
    templateUrl: 'views/directives/vc-select.html',
    link: function(scope, elem, attrs) {
      /* Stop further propagation of event */
      function catchEvent(event) {
        event.stopPropagation();
      };

      function showTooltip(event) {
        $rootScope.$apply(function() {
          scope.tooltipOpen = true;

          /* Hide tooltip on any click outside the select */
          angular.element(document).on('click', hideTooltip);
          elem.on('click', catchEvent);
        });
      };

      function hideTooltip() {
        $rootScope.$apply(function() {
          scope.tooltipOpen = false;

          /* Remove previously attached handlers */
          angular.element(document).off('click', hideTooltip);
          elem.off('click', catchEvent);
        });
      };

      // Set the default display-key
      if ( ! angular.isDefined(scope.displayKey) ) {
        scope.displayKey = DEFAULT_DISPLAY_KEY;
      }

      if (attrs.noKey) {
        scope.optionToText = function(option) {
          return option;
        };
        scope.filterer = function(filterText) {
          return filterText;
        };
      } else {
        scope.optionToText = function(option) {
          if (option) {
            return option[scope.displayKey];
          }
        };
        scope.filterer = function(filterText) {
          // (Ugly ES5 syntax to make an object with one key)
          var filter = {};
          filter[scope.displayKey] = filterText;
          return filter;
        };
      }

      // Whether or not to show a label
      scope.enableLabel = angular.isDefined(scope.label);
      scope.tooltipOpen = false;

      elem.on('mouseenter', showTooltip);
      elem.on('mouseleave', hideTooltip);
    }
  };

});

view.html

<vc-select ng-if="events.length" label="'LI_event'" options="events"
           chosen="newBookingData.event"
           tip="'LI_event_tooltip'">
</vc-select>