Add search filter input inside the select dropdown in HTML AngularJS

Question

I need to implement search filter inside a select dropdown in angularJS. I have used ng-options to list down the options and used filter to filter out the data in the search box within the dropdown, but the problem is that the search box is displaying below select dropdown.

Below is the code snippet of what i tried and displaying the search box below select.

<label class="control-label">My Dropdown 123</label>
<select class="form-control" 
        ng-options="le as (le.ID ? (le.ID  + ' ' + '-' + ' '): '' ) + le.Name  + ' ' +'('+ le.ID + ') ' for le in vm.values | filter: searchFilter track by le.ID "
        data-ng-model="vm.values"
        ng-disabled="vm.isReadOnly">
        <option value="">
            <input type="search" ng-model="searchFilter.legalEntityName" class="" placeholder="Search"></input>
        </option>
    <option value="">All</option>
</select>

However what I need is when I click the select dropdown, it shows a search filter and below it has all the options and I can filter the dropdown using the input text (Basically I need search text box should be within the dropdown)

I read there are options of using <ul>, <l> and ng-repeat ; however I cannot use that since I need to bind the selected option to ng-model after selection.

Any help or advice will be highly appreciated.

Thanks in advance