ui-select

here is a solution: HTML – <ui-select ng-model=”superhero.selected”> <ui-select-match placeholder=”Select or search a superhero …”>{{$select.selected}}</ui-select-match> <ui-select-choices repeat=”hero in getSuperheroes($select.search) | filter: $select.search”> <div ng-bind=”hero”></div> </ui-select-choices> </ui-select> CONTROLLER – $scope.getSuperheroes = function(search) { var newSupes = $scope.superheroes.slice(); if (search && newSupes.indexOf(search) === -1) { newSupes.unshift(search); } return newSupes; } Here is the CodePen solution.

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 … Read more