How do I bind to list of checkbox values with AngularJS?

Question

I have a few checkboxes:

Answer 1

Here is the jsFillde link for the same, http://jsfiddle.net/techno2mahi/Lfw96ja6/.

This uses the directive which is available for download at http://vitalets.github.io/checklist-model/.

This is the good to have directive as your application will need this functionality much often.

The code is below:

HTML:

    

        

            
Multi Checkbox List Demo
            
  
                
                     {{role}}
                
            

            

            check all
            uncheck all
            check first
            

                
Selected User Roles 
                
{{user.roles|json}}
            

            

            
Provided by techno2Mahi
        

JavaScript

var app = angular.module("app", ["checklist-model"]);
app.controller('Ctrl1', function($scope) {
  $scope.roles = [
    'guest',
    'user',
    'customer',
    'admin'
  ];
  $scope.user = {
    roles: ['user']
  };
  $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');
  };
});