Get the total number of the selected list view


I have created this (codepen) to demostrate. As we can see, we have two labels, one is on top, and one is at the bottom. The bottom one display how many items are selected in the list view when you click the plus icon. One problem I have is that I cannot get the total selected amount. The other problem is that the total amount label automatically move down as we add the select item into the view. I am also wondering is there a way to not disable the label move down. Help will be appreciated.


I am on my phone so sorry for the code display.

$scope.selectedItemsCount = function () {
var selected = 0;
for(var i =0 ; i <$scope.tempData.length ; i++){
selected = selected + 1;
return selected;

Total Item {{ selectedItemsCount() }}


Remove the margin -top and add this

<b class="input-label">Total Item {{tempData.length}}</b>


Hi matanyed, thanks for your help :slight_smile:


Hi devz, thanks for your help :smile:


now, what if I want to get let say the total amount (dollars) from the selected text box and add them together. I have tried something like this, but all I get is the first two values, not the entire selected values. I know that there is something wrong with this line, but not sure how to fix it

$scope.getTotal = function () {
    var selectedTotal = 0;
    for (var i = 0; i < $scope.tempData.length; i++) {
        if ($scope.tempData[i].checked) {
            var getAmount = $scope.tempData[i];
            selectedTotal += (getAmount.amount +getAmount.amount);
        return selectedTotal;


I have even better solution
Total items: {{ (tempData | filter: { checked: true }).length }}