Angularjs Bind Multi-Checkbox

HTML

<script src="http://code.angularjs.org/1.1.0/angular.min.js"></script>
<script src="http://vitalets.github.io/checklist-model/checklist-model.js"></script>
<div class="container">
<div class="ng-scope" ng-app="app" ng-controller="Ctrl1">   
        <div class="col-xs-12 col-sm-6">
          <h3>Multi Checkbox List Demo</h3>
          <div class="well"><!-- ngRepeat: role in roles -->
<label ng-repeat="role in roles">
  <input type="checkbox" checklist-model="user.roles" checklist-value="role"> {{role}}
</label>  
 </div>
  <br>
  <button ng-click="checkAll()">check all</button>
  <button ng-click="uncheckAll()">uncheck all</button>
  <button ng-click="checkFirst()">check first</button>        
<div>
 
<h3>Selected User Roles </h3>
<pre class="ng-binding">{{user.roles|json}}</pre>
</div>

<br>
          <div><b/>Provided by techno2Mahi</b></div> 
  </div>

CSS

div[ng-app] { margin: 50px; }
label { display: block; }

JavaScript

var app = angular.module("app", ["checklist-model"]);
app.controller('Ctrl1', function($scope) {
  $scope.roles = [
    'guest', 
    'user', 
    'customer', 
    'admin'
  ];
  $scope.user = {
    roles: ['user', 'user2', 'user3']
  };
  $scope.checkAll = function() {
    $scope.user.roles = angular.copy($scope.roles);
  };
  $scope.uncheckAll = function() {
    $scope.user.roles = [];
  };
  $scope.checkFirst = function() {
    $scope.user.roles.splice(0, $scope.user.roles.length); 
    $scope.user.roles.push('guest');
  };
});