index.html

  
 <!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body ng-app="myApp">

<h3>Fees Fields to change</h3>
<form name="myForm" ng-controller="myCtrl">
 
 <label>&#8358;500 Firstname</label>
 <input type="checkbox" ng-model="fees.firstname">
 <br>

 <label>&#8358;500 Address</label>
 <input type="checkbox" ng-model="fees.address">
 <br>
 
 <label>&#8358;500 Phone number</label>
 <input type="checkbox" ng-model="fees.phonenumber">
 <br>
 
 <label>&#8358;500 Email</label>
 <input type="checkbox" ng-model="fees.email">
 <br>
 
 <div ng-if="fees.firstname || fees.address || fees.phonenumber || fees.email">
 <label>Total: &#8358;{{ computedTotal() }}</label>
 </div>
 <br>
 
 <input type="submit" value="Proceed" ng-disabled="!fees.firstname && !fees.address && !fees.phonenumber && !fees.email">
 <br>

</form>

<script>
 var app = angular.module('myApp', []);
 app.controller('myCtrl', ['$scope',  function($scope) {
  $scope.fees = {
   firstname : false,
   address : false,
   phonenumber : false,
   email : false
  };
  
  $scope.computedTotal = function () {
  var fees = $scope.fees;
  var total = (fees.firstname ? 500 : 0) + (fees.address ? 500 : 0) + (fees.phonenumber ? 500 : 0) + (fees.email ? 500 : 0);
  return total;
};
 }]);
 
</script>

</body>
</html>