JSFiddle - React, Tailwind, and code Playground
HTML
<div ng-app>
<div ng-controller="showCrtl">
<input type="checkbox" name="additionalCoverage" ng-click="cost(150, $event.target.checked)">
<label>Add this coverage $150/YR</label>
<br>
<input type="checkbox" name="additionalCoverage" ng-click="cost(40, $event.target.checked)">
<label>and or this coverage $40/YR</label><br>
<select ng-model="selectedValue">
<option disabled selected>Select one...</option>
<option value="200">add $200/yr</option>
<option 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;">{{annualCost}}</span>
<br>
</div>
</div>
JavaScript
function showCrtl($scope) {
$scope.dollarAmmount = 0.00;
$scope.annualCost = "$" + $scope.dollarAmmount + ".00";
$scope.selectedValue = 0;
$scope.option = 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)
};
$scope.$watch('selectedValue', function(newValue, oldValue){
$scope.dollarAmmount = $scope.dollarAmmount + (newValue - oldValue);
console.log($scope.dollarAmmount)
$scope.annualCost = "$" + $scope.dollarAmmount + ".00";
console.log($scope.dollarAmmount);
})
}