'use strict';
var app = angular.module('demo', ['ngSanitize', 'ui.select', 'ui.grid']);
app.controller('DemoCtrl', function($scope, $http) {
$scope.person = {};
$scope.people = [
{ name: 'Adam', email: 'adam@email.com', age: 10 },
{ name: 'Amalie', email: 'amalie@email.com', age: 12 },
{ name: 'Wladimir', email: 'wladimir@email.com', age: 30 },
{ name: 'Samantha', email: 'samantha@email.com', age: 31 },
{ name: 'EstefanÃa', email: 'estefanÃa@email.com', age: 16 },
{ name: 'Natasha', email: 'natasha@email.com', age: 54 },
{ name: 'Nicole', email: 'nicole@email.com', age: 43 },
{ name: 'Adrian', email: 'adrian@email.com', age: 21 }
];
$scope.person = {};
$scope.person.selected = [];
$scope.gridOptions = {
data: 'person.selected'
};
});
<!DOCTYPE html>
<html lang="en" ng-app="demo">
<head>
<meta charset="utf-8">
<title>AngularJS ui-select</title>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.25/angular-sanitize.js"></script>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.css">
<script src="http://ui-grid.info/release/ui-grid-unstable.js"></script>
<link rel="stylesheet" href="http://ui-grid.info/release/ui-grid-unstable.css" type="text/css" />
<script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-select/0.9.0/select.js"></script>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/angular-ui-select/0.9.0/select.css">
<script src="demo.js"></script>
</head>
<body ng-controller="DemoCtrl">
<hr>
<div>
<ui-select multiple ng-model="person.selected" theme="bootstrap">
<ui-select-match placeholder="Select or search a person in the list...">{{$item.name}}</ui-select-match>
<ui-select-choices repeat="person in people | filter: $select.search">
<div ng-bind-html="person.name | highlight: $select.search"></div>
<small ng-bind-html="person.email | highlight: $select.search"></small>
</ui-select-choices>
</ui-select>
</div>
<hr>
<div class="grid" ui-grid="gridOptions"></div>
</body>
</html>