AngularJS: Getting multiple values for same variable - angularjs

Question

I am doing a project using MEAN Stack and still learning the parts of AngularJS.
I have a form which I get filled from the user. It contains a series of checkboxes which selects the students and stores them in an array. For each students, I intend to take 2 values(correct answers, incorrect answers) for that student. How do I model these two inputs to two variables and get the values in the controller?
The problem is that if one time, I select 3 students, there will be 3 pairs of correct and incorrect answers. If other time I have different students selected, how do I map the answers to those students?
View.html:
<label ng-repeat="studentA1 in studentsA1">
<input
type="checkbox"
ng-model="selectedStudentsA1"
ng-checked="existA1(studentA1)"
value="studentA1"
ng-click="toggleSelectionA1(studentA1)">
{{studentA1}}
</label>
{{selectedStudentsA1}}
<div class="col-md-3">
<h6>Correct Answers</h6>
<input type="number" min="0" name="correctAnswers" ng-model="correctAnswers" required>
</div>
<div class="col-md-3">
<h6>Incorrect Answers</h6>
<input type="number" name="incorrectAnswers" ng-model="incorrectAnswers" min="0" required>
</div>
Controller.js:
$scope.studentsA1 = ['Akhilesh', 'Prathamesh', 'Mandar', 'Sunmay'];
$scope.selectedStudentsA1 = [];
$scope.existA1 = function(item) {
return $scope.selectedStudentsA1.indexOf(item) > -1;
};
$scope.toggleSelectionA1 = function(item) {
var idx = $scope.selectedStudentsA1.indexOf(item);
if (idx > -1) {
$scope.selectedStudentsA1.splice(idx, 1);
} else {
$scope.selectedStudentsA1.push(item);
}
};
$scope.checkAllA1 = function() {
if ($scope.selectAllA1) {
angular.forEach($scope.studentsA1, function(item) {
var idx = $scope.selectedStudentsA1.indexOf(item);
if(idx >= 0) {
return true;
} else {
$scope.selectedStudentsA1.push(item);
}
});
} else {
$scope.selectedStudentsA1 = [];
}
};

Answer 1

Check if this helps you
I have made a fiddle for you
If you are looking more please comment them
In View Side
<div ng-app ng-controller="mainController">
<table>
<tr>
<th>
<input type="checkbox" ng-model="selectAll" ng-click="selectAllCheckBox(selectAll)">
</th>
<th>Name</th>
<th>Correct</th>
<th>Wrong</th>
</tr>
<tr ng-repeat="studentA1 in studentsA1">
<td>
<input type="checkbox" ng-model="studentA1.selected">
</td>
<td> {{studentA1.Name}}</td>
<td>
<input type="number" ng-model="studentA1.Correct" />
</td>
<td>
<input type="number" ng-model="studentA1.Wrong" />
</td>\
</tr>
</table>
<br> {{selectedStudentsA1}}
<a ng-click="selectedStudents()">Submit</a>
</div>
In Controller Side
function mainController($scope) {
$scope.studentsA1 = [{
selected: false,
Name: 'Akhilesh',
Correct: '',
Wrong: ''
}, {
selected: false,
Name: 'Prathamesh',
Correct: '',
Wrong: ''
}, {
selected: false,
Name: 'Mandar',
Correct: '',
Wrong: ''
}, {
selected: false,
Name: 'Sunmay',
Correct: '',
Wrong: ''
}];
$scope.selectedStudents = function() {
$scope.selectedStudentsA1 = $scope.studentsA1.filter(i => i.selected == true);
$scope.correctAnswers = $scope.selectedStudentsA1.length;
$scope.incorrectAnswers = $scope.studentsA1.length - $scope.selectedStudentsA1.length;
}
$scope.selectAllCheckBox = function(value) {
$scope.studentsA1.forEach(function(item) {
item.selected = value;
});
}
}
https://jsfiddle.net/athulnair/9r8sbwx4/