UI Select Example

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.15/angular.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-select/0.11.2/select.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-select/0.11.2/select.js"></script>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.15/angular-sanitize.js"></script>
<h3>Problem</h3>
<div ng-app="app" ng-controller="myCtrl as vm" class="inner">
    <ui-select tagging ng-model="vm.selected" theme="bootstrap">
        <ui-select-match placeholder="Pick one...">{{$select.selected.value}}</ui-select-match>
        <ui-select-choices repeat="val in vm.values | filter: $select.search track by val.value">
            <div ng-bind="val.value | highlight: $select.search"></div>
        </ui-select-choices>
        
    </ui-select>
</div>
<h3>Expected Result</h3>
<div class="inner">
<select>
<option>Pick one..</option>
<option>Kevin</option>
<option>Fiona</option>
</select>
</div>

CSS

.inner {
  overflow-x:scroll;
  width: 140px;
  height: 70px;
}

JavaScript

var app = angular.module('app', ['ui.select']);

app.controller("myCtrl", function () {
    vm = this;
    vm.isLoaded = false;
    vm.values = [{
        'key': 22,
        'value': 'Kevin'
    }, {
        'key': 24,
        'value': 'Fiona'
    }];
    vm.selected;
});