Clear selected option in ui-select angular

Anyone know how to clear the selected value of an ui-select box in angular?

I want the functionality of select2 where you have a small x in the selectbox. Doesn't look like it's got the allow-clear method that select2 got.

Solution 1:

If you are using the select2 theme there is an allow-clear option on the ui-select-match directive that does this for you. You will have the x on the right and you can clear it by clicking it. https://github.com/angular-ui/ui-select/wiki/ui-select-match

Quick example:

<ui-select-match allow-clear="true" placeholder="Select or search a country in the list...">
  <span>{{$select.selected.name}}</span>
</ui-select-match>

Working example: http://plnkr.co/edit/DbbUE68QlNLjx97pBZ56?p=preview

This does not currently work using either the bootstrap or selectize theme.

Solution 2:

You could add a small X button when you display the selection.

<ui-select-match placeholder="Select or search a country in the list...">
  <span>{{$select.selected.name}}</span>
  <button class="clear" ng-click="clear($event)">X</button>
</ui-select-match>

Then you stop the click event from bubbling up and trigger the open event. And you clear the field by overwriting the selected model.

$scope.clear = function($event) {
   $event.stopPropagation(); 
   $scope.country.selected = undefined;
};

Here's the plnkr. http://plnkr.co/edit/qY7MbR