Start function when angularjs option is selected

It is clear that you are thinking with jQuery thinking. You need to practice thinking angular. See this question and answer to understand what it is.

First, you need to actually model your problem, describing what it is and not how things are done. This may seem like splitting hair. Is not. You should use ng-model

for tracking form input, not for click handlers.

Here is the controller code that you should aim for .. notice how it totalCost

is defined as the sum of the cost to cover .. and not some value that you manipulate manually when the user changes your form:

function showCrtl($scope) {
    $scope.coverage = [];
    $scope.totalCost = function (){
        return $scope.coverage.reduce(function(sum, cost){
            return sum + parseInt(cost);
        },0);
    };
}

      

        
        
        
      

    

And here's the template (note that I've removed the input names and click handlers ... you don't need them!):

<input type="checkbox" ng-model="coverage[0]" ng-true-value="150" ng-false-value="0">
<label>Add this coverage $150/YR</label>
<br>
<input type="checkbox" ng-model="coverage[1]" ng-true-value="40" ng-false-value="0">
<label>and or this coverage $40/YR</label><br>
<select ng-model="coverage[2]">
    <option disabled selected>Select one...</option>
    <option ng-value="200">add $200/yr</option>
    <option ng-value="500">add $500/yr</option>
</select>
<h1 class="annualCost">TOTAL ANNUAL COST<br>OF HOME WARRANTY</h1>
<span style="color: green; font-size: 45px; line-height: 2;">
{{totalCost() | currency}}
</span>

      

        
        
        
      

    

Also note the use of currency

. This is called a filter. It is used to format the number in the $ 0.00 format. Formatting is a responsibility usually handled by the view, not the controller or model.

A working violin will open .

If you are interested, we can do a little work and improve the model. Do you see how coverage costs are duplicated in the template (one to display, one to ng-value

)? We can rewrite the controller and view so that the application model (your coverage options) is presented in only one place:

Controller:

function showCrtl($scope) {
    $scope.coverageCosts = [];
    $scope.totalCost = function (){
        return $scope.coverageCosts.reduce(function(sum, cost){
            return sum + parseInt(cost);
        },0);
    };
    $scope.primaryCoverageOptions = [150,40];
    $scope.specialCoverageOptions = [200, 500];
}

      

        
        
        
      

    

In the future, yours coverageOptions

may appear on your back end via AJAX ( $http.get

), or change depending on the graph. Now that the information has been extracted from your view, you can change it more freely.

Template:

<div ng-app>
    <div ng-controller="showCrtl">
        <div ng-repeat="option in primaryCoverageOptions">
            <label>
            <input type="checkbox" ng-model="coverageCosts[$index]" ng-true-value="{{option}}" ng-false-value="0"/>
            Add this coverage {{option | currency}}/YR
            </label>                
        </div>
        <select ng-model="coverageCosts[2]">
            <option disabled selected>Select one...</option>
            <option ng-repeat="option in specialCoverageOptions" ng-value="option">
                {{option | currency}}
            </option>
        </select>
        <h1 class="annualCost">TOTAL ANNUAL COST<br>OF HOME WARRANTY</h1>
        <span style="color: green; font-size: 45px; line-height: 2;">
        {{totalCost() | currency}}
        </span>
        <div>
            Selected coverage costs: {{coverageCosts}}
        </div>
        <br>
    </div>
</div>

      

        
        
        
      

    

Now there is no duplicate data in the view ... all data is coming from the controller. This is good practice.

Updated violin