I have a group of material design checkboxes and I would like to bind their values to an array in my controller.
To accomplish this I used the first method described in this SO answer. While the values are properly being added and removed from the list, the boxes no longer display as "checked" when I click on them. My code is below and I also recreated the problem in this codepen.
HTML for my checkbox
<md-checkbox
ng-repeat="site in websites"
value="{{site}}"
ng-checked="selection.indexOf(site) > -1"
ng-click="toggleSelection(site)">
{{site}}
</md-checkbox>
JavaScript from Controller
$scope.websites = ['Facebook', 'Twitter', 'Amazon'];
$scope.selection = ['Facebook'];
$scope.toggleSelection = function toggleSelection(site) {
var idx = $scope.selection.indexOf(site);
// is currently selected
if (idx > -1) {
$scope.selection.splice(idx, 1);
}
// is newly selected
else {
$scope.selection.push(site);
}
};
});
