How to get the Total value in column in angularjs?

Question

I'm new to angularjs. How to get the total amount in the table Total Amount column and display in input textbox? I think this plunker can solve my problem but I can't access it now. http://plnkr.co/edit/CHBm8RCqW5RNZWrzAe5r?p=preview

Here is my table sample

<table>
                <thead>
                    <tr>

                        <th>Product</th>
                        <th>Quantity</th>
                        <th>Total Amount</th>


                    </tr>
                </thead>
                <tbody>
                    <tr ng-repeat="payment_queue in data | filter:searchFilter">

                        <td>{{payment_queue.product_name}}</td>
                        <td>{{payment_queue.sold_quantity}}</td>
                        <td>{{payment_queue.amount}}</td>

                    </tr>
                </tbody>
            </table>

Total Amount: <input type="text value=""> <--- the total amount value goes here...

js

var myApp = angular.module('myApp', ['ngRoute']); 
    myApp.controller('productsalesController', ['$scope', '$http', function ($scope, $http) {



                    $scope.data=[];

                    $http.get("../php/paymentQueuedata.php")
                        .success(function(data){
                            $scope.data = data;
                        })
                        .error(function() {
                            $scope.data = "error in fetching data";
                        });

         }]);

php json

    <?php
    //database settings
    $connect = mysqli_connect("localhost", "root", "", "rmsdb");

    $result = mysqli_query($connect, "select * from payment_queue");


$data = array();

while ($row = mysqli_fetch_array($result)) {
  $data[] = $row;
}
    print json_encode($data);
?>

Answer 1

There a way to get the totals without using a function.

Just use ng-init. If you need to allow the list to change or be filtered, use ng-repeat with it to force recalculation of the totals.

<table class="table table-bordered table-hover">
  <thead>
    <tr>
      <th>Product</th>
      <th>Quantity</th>
      <th>Price</th>
      <th>Ext</th>
    </tr>
  </thead>
  <tbody ng-repeat="_ in [ [ search, products ] ]" ng-init="total = 0">
    <tr ng-repeat="product in products | filter: search">
      <td>{{ product.name }}</td>
      <td>{{ product.quantity }}</td>
      <td>{{ product.price }}</td>
      <td ng-init="$parent.total = $parent.total + (product.price * product.quantity)">${{ product.price * product.quantity }}</td>
    </tr>
    <tr>
      <td><b>Total</b></td>
      <td></td>
      <td></td>
      <td><b>${{ total }}</b></td>
    </tr>
  </tbody>
</table>

See http://plnkr.co/edit/dLSntiy8EyahZ0upDpgy?p=preview for a workinig example.