Angular ui-select child directive to clear (Bootstrap) input

ui-select-clear.js

(function () {
  'use strict';

  angular
    .module('app.directives')
    .directive('uiSelectClear', SelectClear)
  ;

  SelectClear.$inject = ['$timeout'];

  /**
   * Child directive for clearing ui-select
   */
  function SelectClear($timeout) {
    return {
      restrict: 'EA',
      require: '^uiSelect',
      template: '<a class="btn btn-xs pull-right" style="margin-right:10px">X</a>',
      replace: true,

      link: function (scope, element, attrs, $select) {

        element.on('click', function (e) {
          e.stopPropagation();
          $timeout(function () {
            $select.selected = undefined;
          });
        });
      }
    };
  }
})();