JSFiddle - React, Tailwind, and code Playground

HTML

<div ng-app>
    <div ng-controller="showCrtl">
      <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>
             
         <div>
             Selected coverage costs: {{coverage}}
         </div>
        <br>
    </div>
</div>

JavaScript

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