Using multi-select along with dropdown triangle displayed in ui-select - angularjs

Question

Is there any way to keep dropdown triangle (▼) displayed for multiple mode of ui-select?
<div ui-select multiple ng-model="selectedItems" class="form-control">
<div ui-select-match>
<span>{{$item.name}}</span>
</div>
<div ui-select-choices repeat="item in availableItems" >
<span>{{item.name}}</span>
</div>
</div>
I managed to steal the triangle from ordinary ui-select:
<i class="caret pull-right" ng-click="$select.toggle($event)"></i>
but having difficulties displaying it properly on the ordinary place to the right. Any tips? Thanks.

Answer 1

The solution I got so far: reused this caret class and made it displayed on top of the component using style position: relative; left: -1.5em;, placing the element right after ui-select (placing it straight inside ui-select is not possible because angularjs replaces it's content with own templates - so my caret comes after but then shifted left)
Also, I had to attach ng-click which does $select.toggle($event) to this caret element. As long as the $select is not available out of scope of ui-select, I had to introduce outer controller which includes both ui-select and caret elements - and simply assign $select a field within it using ng-init on ui-select.
So it looks something like:
<div ui-select multiple ng-model="selectedItems" class="form-control" ng-init="mySelect = $select">
<div ui-select-match>
<span>{{$item.name}}</span>
</div>
<div ui-select-choices repeat="item in availableItems" >
<span>{{item.name}}</span>
</div>
</div>
<span style="position: relative; left: -1.5em;" class="caret"
ng-click="mySelect.toggle($event)></span>
▼ is displayed only when dropdown is not opened. Also, clicking it requires some pixel-hunting (can be mitigated by putting the caret into a div that spreads vertical). So it's a partial solution.

Answer 2

The best approach I worked out is a scalable background SVG image applied using this CSS:
.select2-search-field {
width: 100%;
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='1em' height='1em' viewBox='0 0 13 6' fill='gray'><polygon points='0 1 8 1 4 5'></polygon></svg>");
background-repeat: no-repeat;
background-position-y: center;
background-position-x: right;
}