Counting selected checkbox in AngularJS - angularjs

Question

I'm having a hard time counting selected checkboxes in my application. I've tried following along some other stack overflow questions but no dice yet...if you guys have any experience with counting checkboxes, some help would be great.
HTML:
<div class="row">
<div class="col-md-12">
<table id="document-table" st-table="documents" st-safe-src="yourDisplayedCollection" class="table">
<div>Total checked: ({{selectedCounter}})</div>
<thead>
<tr>
<th>
<st-select-all all="yourDisplayedCollection"></st-select-all>
</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="document in documents">
<td><input type="checkbox" ng-model="document.isSelected"/></td>
</tr>
</tbody>
</table>
</div>
</div>
Controller:
.controller('DocumentsController', /** #ngInject */ function ($scope, restData, dateFormats, documents) {
$scope.dateFormat = dateFormats.angularDateFilter;
$scope.documents = documents.resultBag[0].documentBag;
$scope.yourDisplayedCollection = [].concat(documents.resultBag[0].documentBag);
$scope.selectAll = function (selected) {
var documents = $scope.documents;
angular.forEach(documents, function (documents) {
documents.selected = selected;
});
// Update the counter
if(selected){
$scope.selectedCounter = documents.length;
} else {
$scope.selectedCounter = 0;
}
};
EDIT:
I have a check all boxes checkbox at the top which is why i have the yourDisplayedCollection in the table as well as the ng-model="document.isSelected"

Answer 1

You need to rework a couple things if I am understanding the anticipated outcome correctly.
First(html):
<tr ng-repeat="document in documents">
//Bind your model directily to the selected property in your object (document)
<td><input type="checkbox" ng-model="document.selected"/></td>
</tr>
Second:
$scope.selectAll = function (selected) {
var documents = $scope.documents;
angular.forEach(documents, function (doc) {
if(doc.selected)
$scope.selectedCounter +=1;
});
};
This will give you a correct count everytime. Though your function naming is misleading. SelectAll should mean literally select all. To me it looks like your just counting.

Answer 2

Simplest way to do this is use Array.prototype.filter() and use length of filtered array
<input type="checkbox" ng-model="document.selected"/>
And for counter:
$scope.selectedCounter = $scope.documents.filter(function(item){
return item.selected;
}).length;
Need to be aware that you are breaking the golden rule of always using an object in ng-model.
ng-repeat creates a child scope and when you use a primitive in the child scope the parent controller can't see it change