<!DOCTYPE html>
<html lang="en" ng-app="demo">
<head>
<meta charset="utf-8" />
<title>AngularJS ui-select</title>
<script data-require="angular.js@1.6.1" data-semver="1.6.1" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.js"></script>
<link data-require="bootstrap-css@3.3.1" data-semver="3.3.1" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" />
<!-- ui-select files -->
<link data-require="ui-select@*" data-semver="0.19.4" rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-select/0.19.4/select.min.css" />
<link data-require="select2@3.4.5" data-semver="3.4.5" rel="stylesheet" href="//cdn.jsdelivr.net/select2/3.4.5/select2.css" />
<script data-require="select2@3.4.5" data-semver="3.4.5" src="//cdn.jsdelivr.net/select2/3.4.5/select2.min.js"></script>
<script data-require="ui-select@*" data-semver="0.19.4" src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-select/0.19.4/select.min.js"></script>
<script data-require="jquery@2.0.3" data-semver="2.0.3" src="https://code.jquery.com/jquery-2.0.3.js"></script>
<script data-require="ui-select2@*" data-semver="0.0.4" src="//rawgithub.com/angular-ui/ui-select2/master/src/select2.js"></script>
<script src="script.js"></script>
</head>
<body ng-controller="DemoCtrl">
<h3>Array of strings</h3>
<ui-select multiple="" ng-model="orderItem.items" theme="select2" ng-disabled="disabled" style="width: 300px;">
<ui-select-match placeholder="Select order item...">{{$item}}</ui-select-match>
<ui-select-choices repeat="item in itemDetails | filter:$select.search">
{{item}}
</ui-select-choices>
</ui-select>
<p>Selected: {{orderItem.items}}</p>
</body>
</html>
'use strict';
var app = angular.module('demo', ['ui.select']);
app.controller('DemoCtrl', function($scope) {
$scope.itemDetails = ['a','b','c'];
$scope.orderItem = {};
$scope.orderItem.items = ['a','b'];
});