JSFiddle - React, Tailwind, and code Playground

HTML

<div ng-app>
    <div ng-controller="showCrtl">
        <input type="checkbox" name="additionalCoverage" ng-click="planCost(150, $event.target.checked)">
        <label>Add this coverage $150/YR</label>
        <br>
        <input type="checkbox" name="additionalCoverage" ng-click="planCost(40, $event.target.checked)">
        <label>and or this coverage $40/YR</label><br>
            
            <select>
                <option disabled selected>Select one...</option>
                <option ng-selected="option(200)">add $200/yr</option>
                <option ng-selected="option(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;">{{annualCost}}</span>
        <br>
    </div>
</div>

JavaScript

function showCrtl($scope) {
    $scope.dollarAmmount = 0.00;
    $scope.annualCost = "$" + $scope.dollarAmmount + ".00";

    $scope.planCost = function (amt) {
        $scope.dollarAmmount = $scope.dollarAmmount + amt;
        $scope.annualCost = "$" + $scope.dollarAmmount + ".00";
        console.log($scope.dollarAmmount)
    };
    
    $scope.cost = function (amt, checked) {
        amt *= checked ? 1 : -1;
        $scope.dollarAmmount = $scope.dollarAmmount + amt;
        $scope.annualCost = "$" + $scope.dollarAmmount + ".00";
        console.log($scope.dollarAmmount)
    };
}