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 as vm">
  <ui-select multiple tagging ng-model="vm.selected" theme="bootstrap">
    <ui-select-match placeholder="Pick one...">{{$item.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>

JavaScript

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

app.run(['$templateCache', function($templateCache) {
  $templateCache.put('bootstrap/match-multiple.tpl.html',
    '<span class="ui-select-match">' +
  '<span ng-repeat="$item in $select.selected track by $index">' +
    '<span ' +
      'ng-click="$selectMultiple.removeChoice($index)" ' +
      'class="ui-select-match-item btn btn-default btn-xs" ' +
      'tabindex="-1" ' +
      'type="button" ' +
      'ng-disabled="$select.disabled" ' +
      'ng-class="{\'btn-primary\':$selectMultiple.activeMatchIndex === $index, \'select-locked\':$select.isLocked(this, $index)}" ' +
      'ui-select-sort="$select.selected">' +
        '<span class="close ui-select-match-close" ng-hide="$select.disabled" ng-click="$selectMultiple.removeChoice($index)">&nbsp;&times;</span>' +
        '<span uis-transclude-append></span>' +
    '</span>' +
  '</span>' +
'</span>');
}]);

app.controller("myCtrl", ['$templateCache', function($templateCache) {
  console.log($templateCache.get('match-multiple.tpl.html'));
  vm = this;
  vm.isLoaded = false;
  vm.values = [
   {
    'key': 1,
    'value': 'Adam'
  },
  {
    'key': 2,
    'value': 'Fiona'
  },
  {
    'key': 3,
    'value': 'Kevin'
  }, 
  {
    'key': 4,
    'value': 'Robert'
  }];
  vm.selected;
}]);