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

There are two ways to approach this problem. Either use a simple array or an array of objects. Each solution has it pros and cons. Below you'll find one for each case.

With a simple array as input data

The HTML could look like:

<label ng-repeat="fruitName in fruits">  <input    type="checkbox"    name="selectedFruits[]"    value="{{fruitName}}"    ng-checked="selection.indexOf(fruitName) > -1"    ng-click="toggleSelection(fruitName)"  > {{fruitName}}</label>

And the appropriate controller code would be:

app.controller('SimpleArrayCtrl', ['$scope', function SimpleArrayCtrl($scope) {  // Fruits  $scope.fruits = ['apple', 'orange', 'pear', 'naartjie'];  // Selected fruits  $scope.selection = ['apple', 'pear'];  // Toggle selection for a given fruit by name  $scope.toggleSelection = function toggleSelection(fruitName) {    var idx = $scope.selection.indexOf(fruitName);    // Is currently selected    if (idx > -1) {      $scope.selection.splice(idx, 1);    }    // Is newly selected    else {      $scope.selection.push(fruitName);    }  };}]);

Pros: Simple data structure and toggling by name is easy to handle

Cons: Add/remove is cumbersome as two lists (the input and selection) have to be managed

With an object array as input data

The HTML could look like:

<label ng-repeat="fruit in fruits">  <!--    - Use `value="{{fruit.name}}"` to give the input a real value, in case the form gets submitted      traditionally    - Use `ng-checked="fruit.selected"` to have the checkbox checked based on some angular expression      (no two-way-data-binding)    - Use `ng-model="fruit.selected"` to utilize two-way-data-binding. Note that `.selected`      is arbitrary. The property name could be anything and will be created on the object if not present.  -->  <input    type="checkbox"    name="selectedFruits[]"    value="{{fruit.name}}"    ng-model="fruit.selected"  > {{fruit.name}}</label>

And the appropriate controller code would be:

app.controller('ObjectArrayCtrl', ['$scope', 'filterFilter', function ObjectArrayCtrl($scope, filterFilter) {  // Fruits  $scope.fruits = [    { name: 'apple',    selected: true },    { name: 'orange',   selected: false },    { name: 'pear',     selected: true },    { name: 'naartjie', selected: false }  ];  // Selected fruits  $scope.selection = [];  // Helper method to get selected fruits  $scope.selectedFruits = function selectedFruits() {    return filterFilter($scope.fruits, { selected: true });  };  // Watch fruits for changes  $scope.$watch('fruits|filter:{selected:true}', function (nv) {    $scope.selection = nv.map(function (fruit) {      return fruit.name;    });  }, true);}]);

Pros: Add/remove is very easy

Cons: Somewhat more complex data structure and toggling by name is cumbersome or requires a helper method

Demo: http://jsbin.com/ImAqUC/1/

A simple solution:

<div ng-controller="MainCtrl">  <label ng-repeat="(color,enabled) in colors">      <input type="checkbox" ng-model="colors[color]" /> {{color}}   </label>  <p>colors: {{colors}}</p></div><script>  var app = angular.module('plunker', []);  app.controller('MainCtrl', function($scope){      $scope.colors = {Blue: true, Orange: true};  });</script>

http://plnkr.co/edit/U4VD61?p=preview

<input type='checkbox' ng-repeat="fruit in fruits"  ng-checked="checkedFruits.indexOf(fruit) != -1" ng-click="toggleCheck(fruit)">

.

function SomeCtrl ($scope) {    $scope.fruits = ["apple, orange, pear, naartjie"];    $scope.checkedFruits = [];    $scope.toggleCheck = function (fruit) {        if ($scope.checkedFruits.indexOf(fruit) === -1) {            $scope.checkedFruits.push(fruit);        } else {            $scope.checkedFruits.splice($scope.checkedFruits.indexOf(fruit), 1);        }    };}