<!DOCTYPE html>
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script>
document.write('<base href="' + document.location + '" />');
</script>
<link rel="stylesheet" href="style.css" />
<script data-require="angular.js@1.2.x" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.min.js" data-semver="1.2.16"></script>
<script src="script.js"></script>
</head>
<body ng-controller="MainCtrl">
<table>
<tr ng-repeat="subscription in entities">
<td>
<input type="checkbox" ng-model="subscription.checked" ng-click="updateSelection($index, entities)" />
</td>
</tr>
</table>
<tt>{{entities}}</tt>
</body>
</html>
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
$scope.entities = [{
name: 'one',
checked: false
}, {
name: 'two',
checked: false
}, {
name: 'three',
checked: true
}, {
name: 'four',
checked: false
}
]
$scope.updateSelection = function(position, entities) {
angular.forEach(entities, function(subscription, index) {
if (position != index)
subscription.checked = false;
});
}
});
/* Styles go here */
Select only one checkbox out of three with same name