Angular - Getting the Sum of and instance

Question

I have a small calculator that I am working on and I pretty much figured out how to input a number and get the sum of a row but for some reason I cannot get the sum of my High Impact row and Low Impact row to show up. Here is my HTML

                        <table>
                        <thead>
                            <tr>
                                <th>Move Types</th>
                                <th>Avg. $ Cost per Lost Day</th>
                                <th>Avg. Lost Productivity (# Days)</th>
                                <th>Volume of Moves</th>
                                <th>Annual Lost Productivity Cost</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td><strong>High Impacts</strong></td>
                                <td data-label="Avg. $ Cost per Lost Day">$
                                    <input type="number" class=" input input-sm" style="width:150px" type="text" ng-model="highLost">
                                </td>
                                <td data-label="Avg. Lost Productivity (# Days)">24.4</td>
                                <td data-label="Volume of Moves">
                                    <input type="number" class=" input input-sm" style="width:150px" type="text" ng-model="highVolMove">
                                </td>
                                <td data-label="Annual Lost Productivity Cost">
                                    $<span ng-bind="sumHight() | number:0" style="font-weight:bold;"></span>
                                </td>
                            </tr>
                            <!-- Low Impacts -->
                            <tr>
                                <td><strong>Low Impacts</strong></td>
                                <td data-label="Avg. $ Cost per Lost Day">
                                    $
                                    <input type="number" class=" input input-sm" style="width:150px" type="text" ng-model="lowLost">
                                </td>
                                <td data-label="Avg. Lost Productivity (# Days)">
                                    14.8
                                </td>
                                <td data-label="Volume of Moves">
                                    <input type="number" class=" input input-sm" style="width:150px" type="text" ng-model="lowVolMove">
                                </td>
                                <td data-label="Annual Lost Productivity Cost">
                                    $ <span ng-bind="sumLow() | number:0" style="font-weight:bold;"></span>
                                </td>
                            </tr>
                            <!-- end Low Impact -->
                            <tr>
                                <td data-label="All Moves"><strong>All Moves</strong></td>
                                <td data-label="Avg. $ Cost per Lost Day">
                                    $ <span ng-bind="allMoves() | number:0" style="font-weight:bold;"></span>
                                </td>
                                <td data-label="Avg. Lost Productivity (# Days)">
                                    39.2
                                </td>
                                <td data-label="Volume of Moves">
                                    <span ng-bind="volumeOfMoves() | number:0" style="font-weight:bold;"></span>
                                </td>
                                <td data-label="Annual Lost Productivity Cost">
                                    $ <span ng-bind="annualLostProductivity() | number:0" style="font-weight:bold;"></span>
                                </td>
                            </tr>
                        </tbody>
                    </table>

And here is my controller

angular.module('cal', [])
.controller('homeController', ['$scope', function($scope) {

    $scope.sumHight = function() {
        return $scope.highLost * 24.4 * $scope.highVolMove;
    }

    $scope.sumLow = function() {
        return $scope.lowLost * 14.8 * $scope.lowVolMove;
    }

    $scope.allMoves = function() {
        return $scope.highLost + $scope.lowLost;
    }

    $scope.volumeOfMoves = function() {
        return $scope.highVolMove + $scope.lowVolMove;
    }

    $scope.annualLostProductivity = function() {
        return $scope.sumHight + $scope.sumLow;
    }

}]);

I was able to copy other results in and they worked but when I used:

$scope.annualLostProductivity = function() {
        return $scope.sumHight + $scope.sumLow;
    }

I get nothing.

Thanks in advance if your able to help.

Rob

Answer 1

Remember to use () when you are invoking functions! :D

Answer 2

You need to be invoking the functions - you're "adding" references to the function declarations instead.

$scope.annualLostProductivity = function() {
    return $scope.sumHight() + $scope.sumLow();
}