Calculate sum in ng-repeat input fields AngularJS

Question

I'm trying to calculate the sum of the input fields in ng-repeat. Is there an easy way to display each row dynamically using ng-repeat and display the sum of it all as well?

Thanks for your help! I really appreciate it!

HTML

        <div class="row">

            <div class="small-12">

                <div class="outreach-bar">

                    <div class="outreach-bar__headline"><h1><span class="icon-pie-chart"></span>Current Total -  $<span class="js-form--outreach__step-total">0</span></h1></div>

                        <div class="outreach-bar__section-wrap outreach-bar__progress">
                        </div><!--/.outreach-bar__section-wrap -->

                </div><!--/.outreach-bar -->

            </div><!--/.col -->

        </div><!--/.row -->

        <div class="carousel--outreach__title"><h1>Step 1 - Home</h1></div>

        <div class="form--outreach" ng-controller="AddController">

            <div class="row">

                <div class="small-12 columns">

                    <div class="form--outreach__step-title">Current Total - $<span class="js-form--outreach__step-total">0</span></div>
                    <div class="form--outreach__step-intro">Enter your monthly home expenses below to see how much you spend each month.</div>

                </div><!--/.col -->

            </div><!--/.row-->

            <div class="row" >

                <div class="small-6 columns">

                    <div class="form--outreach__input-label">Mortgage / Rent</div>

                    <input type="number" class="form--outreach__input js-form--outreach__input" placeholder="Enter Amount"/> 

                </div><!--/ .col -->

                <div class="small-6 columns">

                    <div class="form--outreach__input-label">Mortgage / Rent</div>

                    <input type="number" class="form--outreach__input js-form--outreach__input" placeholder="Enter Amount"/>

                </div><!--/ .col -->

            </div><!--/ .row -->

            <div class="row" ng-repeat="rowContent in rows">

                <div class="small-6 columns">

                    <div class="form--outreach__input-label">Mortgage / Rent</div>

                    <input type="number" class="form--outreach__input js-form--outreach__input" placeholder="Enter Amount"/> 

                </div><!--/ .col -->

            </div><!--/ .row -->

            <div class="row">

                <div class="small-12 columns">

                    <div class="form--outreach__add-wrap">
                        <a class="form--outreach__add-plus" ng-click="addRow()"></a>
                        <h2>Add Items</h2>
                    </div><!-- form--outreach__add-wrap -->

                </div><!--/.col -->

            </div><!--/.row-->

        </div><!--/ .form--outreach -->

    </div><!--/.carousel--outreach__step -->

[...]

$(document).on('ready', function() {
    $('input.js-form--outreach__input').on('input', function(){
    var sum=0;
    $('input.js-form--outreach__input').each(function(){
        if($(this).val() != "")
          sum += parseInt($(this).val());   
    });

    $('.js-form--outreach__step-total').html(sum);

    });// end of sum functionality
});


    var app = angular.module('OutreachCarousel', []);

    app.controller('AddController', ['$scope', function ($scope) {
      $scope.rows = ['Row'];

        $scope.counter = 1;

        $scope.addRow = function() {

        $scope.rows.push('Row' + $scope.counter);
        $scope.counter++;
    }

}]);// end of add row functionality

Answer 1

I don't understand your request at all but if but I think that you mean the sum of the expenses right? So you should, in your controller, calculate the initial sum:

$scope.sum = 0;
for (var i = 0; i < $scope.rows.length; ++i) {
    sum += sum + 1 + $scope.rows[i]; // add the value
}

And then if you add a new row, then add the new value to $scope.sum and add the row to $scope.rows

$scope.addRow = function() {
    $scope.rows.push('Row' + $scope.counter);
    ++$scope.counter;
    $scope.sum = sum + $scope.newValue;
}