How to use checklistbox in angularjs or in bootstrap -

can suggest me how can display checkbox list in angularjs

html:

<div ng-app="app">     <div ng-controller="todoctrl">         <span ng-repeat="(checkboxname, checkboxvalue) in checkboxes">             {{ checkboxname }}             <input type="checkbox" ng-model="checkboxvalue"/>         </span>     </div> </div> 

javascript:

var app = angular.module('app', []); app.controller('todoctrl', function($scope) {     $scope.checkboxes = {         'foo': true,         'bar': false,         'baz': true,         'baa': true     } }); 

---

update:

html:

<div ng-app="app">     <div ng-controller="todoctrl">         <!--<span ng-repeat="(checkboxname, checkboxvalue) in checkboxes">             {{ checkboxname }}             <input type="checkbox" ng-model="checkboxvalue"/>         </span>-->         <checklist checkboxes="checkboxes" on-change="checkboxinfo(name, value)"></checklist>     </div> </div> 

javascript:

var app = angular.module('app', []); app.controller('todoctrl', function($scope) {     $scope.foo = true;     $scope.bar = false;     $scope.baz = true;     $scope.baa = true;      $scope.checkboxes = {         'foo': $scope.foo,         'bar': $scope.bar,         'baz': $scope.baz,         'baa': $scope.baa     };      // non-encapsulated activity: updates parent scope values     $scope.checkboxinfo = function(name, value) {         console.log('checkbox "' + name + '" clicked. now: ' + value + '.');         $scope[name] = value;     };      // shouldn't if delete '$scope[name] = value', since isolated scope:     $scope.$watchcollection('[foo, bar, baz, baa]', function() {         console.log($scope.foo, $scope.bar, $scope.baz, $scope.baa);     }); }) .directive('checklist', function($timeout) {     return {         restrict: 'e',         scope: {              checkboxes: '=',  // create isolate scope w/ 2-way binding             onchange: '&'     // execute function in parent scope         },         template:              '<span ng-repeat="(checkboxname, checkboxvalue) in checkboxes">' +                 '{{ checkboxname }}' +                 '<input type="checkbox" ng-model="checkboxvalue" ng-change="onchange({name:checkboxname, value:checkboxvalue})"/>' +             '</span>',         link: function(scope, element, attrs) {             // add encapsulated activity necessary         }     }; });