var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
$scope.Users = [{
UserName: "Stackoverflow",
UserId: "1",
Options: [{
Name: "1 Day",
isSelected: false
}, {
Name: "6 Months",
isSelected: true
}, {
Name: "1 Year",
isSelected: false
}]
}, {
UserName: "StackExchange",
UserId: "2",
Options: [{
Name: "1 Day",
isSelected: true
}, {
Name: "6 Months",
isSelected: false
}, {
Name: "1 Year",
isSelected: false
}]
}];
$scope.logData = function(data) {
console.log(data);
};
});
<!doctype html>
<html ng-app="plunker" >
<head>
<meta charset="utf-8">
<title>AngularJs Radio Button Sets</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.js"></script>
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
<table border="1">
<thead>
<tr>
<th>UserName</th>
<th>Option</th>
</tr>
</thead>
<tbody>
<tr data-ng-repeat="user in Users">
<td>{{user.UserName}}</td>
<td>
<label data-ng-repeat="option in user.Options">
<input type="radio" name="{{user.UserId}}" ng-model="option.isSelected" value="true" />
{{option.Name}}
</label>
<button type="button" data-ng-click="logData(user)">SAVE</button>
</td>
</tr>
</tbody>
</table>
</body>
</html>
/* Put your css in here */
.some {
border: 1px solid #cacaca;
padding: 10px;
}