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>
    <div ng-app="app" ng-controller="myCtrl">      
       <ui-select multiple ng-model="selected" theme="bootstrap" close-on-select="false" title="Choose a person">
        <ui-select-match placeholder="Pick some ..">{{$item.value}}</ui-select-match>
        <ui-select-choices repeat="val in values track by val.value">
          <div ng-bind="val.value | highlight: $select.search"></div>
        </ui-select-choices>
      </ui-select>
    </div>

JavaScript

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

    app.controller("myCtrl", function ($scope) {
    
        $scope.values = [{
            'key': 22,
            'value': 'Kevin'
        }, {
            'key': 24,
            'value': 'Fiona'
        }];
        
        $scope.selected = null;
    });