JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://getbootstrap.com/2.3.2/assets/css/bootstrap.css">
<div ng-controller="MainCtrl">
    <ul>
       <li ng-repeat="invoice in invoices">
           
            <input type="number" step="any" placeholder="Enter Amount" 
                    ng-model="invoice.salesOrder" ng-change="getSalesTotal()" />
       </li>
    </ul>

    <div class="sum"> Total Amount: ${{sum}}
                </div><!-- READ ONLY -->
        
</div>
2

CSS

ul { list-style-type: none; margin: 1.5em 0; }
.sum { border: 1px solid black; padding: 1em; }

JavaScript

var app = angular.module('angularjs-starter', [])

.controller("MainCtrl", 
            function($scope) {
   $scope.sum = 0;
    $scope.invoices = [
        {
            "salesOrder": "0"       
        },
        {
            "salesOrder": "0"        
        },
        {
            "salesOrder": "0"  
        }
    ];
                
                $scope.getSalesTotal = function(){
                     $scope.sum = 0;
                    $scope.invoices.forEach(function(invoice){
                        $scope.sum += parseInt(invoice.salesOrder, 10);
                    });
                };
                
   
});