<!DOCTYPE html>
<html ng-app="app">
<head>
<script data-require="angularjs@1.5.3" data-semver="1.5.3" src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.min.js"></script>
<script src="https://rawgit.com/klumba12/groupbox/master/groupbox.js"></script>
<link rel="stylesheet" href="style.css" />
</head>
<body ng-controller="groupboxTest">
<h4>Data</h4>
<div style="height:250px; width: 100%; overflow-y: auto;">
<ul groupbox="model.data"
groupbox-model="isSelected"
groupbox-selection="state.selection"
groupbox-selection-key="code"
style="list-style: none;margin:0;padding:0;">
<li style="margin-bottom: 5px;">
<label>
<input groupbox-all type="checkbox" ng-model="state.selectAll" /> Select All
</label>
</li>
<li ng-repeat="item in model.data" style="background-color: #{{item.code}}">
<label>
<input groupbox-item type="checkbox" ng-model="item.isSelected"/>
#{{item.code}}
</label>
</li>
</ul>
</div>
<h4>Selection</h4>
<div style="height:250px; width: 100%; overflow-y: auto;">
<ul style="list-style: none;margin:0;padding:0;">
<li ng-repeat="item in state.selection" style="background-color: #{{item.code}}">
{{item}}
</li>
</ul>
</div>
<script language="javascript">
var app = angular.module('app', ['groupbox']);
app.controller('groupboxTest', ['$scope', function ($scope) {
$scope.model = {data: []};
$scope.state = {selection: [], selectAll: false};
for (var i = 0; i < 30; i++) {
var code = Math.floor(Math.random() * 16777215);
$scope.model.data[i] = {
isSelected: false,
code: code.toString(16),
};
}
}]);
</script>
</body>
</html>