ng-model not updating the value in jsp page

I am trying to calculate the values : amountBeforeTax taxAmount and amount but my input named : amountBeforeTax is not updating value to $scope.amountBeforeTax in the controller.

Versions :

Angular JS : 1.2.20
jstl: 1.2
servlet-api: 2.5
java version : 1.8.0_261

What am I missing ?

My JS : -

var app = angular.module('helloApp', []);
app
.controller(
'HttpController',
[
'$scope',
'$rootScope',
'$filter',
'$location',
'$window',
'$http',
function($scope, $rootScope, $filter, $location,
$window, $http) {
$scope.apiKey = document.getElementById("apiKey").value;
$scope.amountBeforeTax = '';
$scope.taxAmount = '';
$scope.amount = '';
$scope.showConfirmation = false;
$scope.makePayment = function() {
console.log("make payment start");
$scope.taxAmount = $scope.amountBeforeTax * 0.15;
console.log("amount before tax " + $scope.amountBeforeTax);
$scope.amount = $scope.taxAmount + $scope.amountBeforeTax;
console.log("tax amount " + $scope.taxAmount);
console.log("total amount " + $scope.amount);
$scope.showConfirmation = true;
console.log("make payment end");
}
$scope.proceedPayment = function() {
console.log("proceedPayment payment start");
console.log("proceedPayment payment end");
}
}]);

I have used ng-model and bi directional binding to show the value in realtime on the page but it is not updating.

My JSP : -

<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!-- userWhatsAppBuyCredits.jsp -->
<input type="hidden" value="${pageContext.request.contextPath}"
id="contextPath">
<input type="hidden" id="apiKey" value="${apiKeyAttribute}">
<!-- start:main -->
<div class="container">
<div id="main">
<!-- start:breadcrumb -->
<ol class="breadcrumb">
<li><a
href="${pageContext.request.contextPath}/reseller/clientres.jsp">Home</a></li>
<li class="active">Buy Credits</li>
</ol>
<div class="row" id="home-content">
<div class="col-lg-12" style="margin: 25px;">Buy Credits</div>
<div class="col-lg-12" style="margin: 25px;" ng-if="!showConfirmation">
<label for="paymentAmount"></label>
<input name="amountBeforeTax"
id="amountBeforeTax" ng-model="amountBeforeTax"> <br>
<button ng-click="makePayment()">Purchase Credits</button>
</div>
<div class="col-lg-12" style="margin: 25px;">
bT : {{ amountBeforeTax  }} tax : {{ taxAmount }} amount {{ amount }}
</div>
<div class="col-lg-12" style="margin: 25px;" ng-if="showConfirmation">
<section class="panel">
<!-- <header class="panel-heading">Credits Information </header> -->
<div class="panel-body" id="tablediv">
<div class="adv-table">
<table width="50%">
<tr>
<td
style="color: white; font-weight: 600; background: #2b7eb4;"><b>Amount</b></td>
<td
style="color: white; font-weight: 600; background: #2b7eb4;"><b>R{{ amountBeforeTax}}</b></td>
</tr>
<tr>
<td>VAT @ 15%</td>
<td>R{{ taxAmount }}</td>
</tr>
<tr>
<td
style="color: white; font-weight: 600; background: #2b7eb4;"><b>Total
Amount to be paid in ZAR</b></td>
<td
style="color: white; font-weight: 600; background: #2b7eb4;"><b>R{{ amount }}</b></td>
</tr>
</table>
<hr>
<label>Amount to be paid:R {{ amount}} ZAR</label>
<hr>
<form action="MakePayment">
<button type="submit" class="btn btn-success" ng-click="proceedPayment()">
Proceed<i class="fa fa-arrow-circle-right"></i>
</button>
<!-- </div> -->
</form>
<!-- end:breadcrumb -->
</div>
</div>
</section>
</div>
</div>
</div>
</div>
<script
src="${pageContext.request.contextPath}/assets/js/CustomJs/whatsapp/client/userWhatsAppBuyCredits.js"></script>

I have tried debugging but could not find the issue in the code.

change to:

$scope.amountBeforeTax = {value:''};

view

ng-model="$scope.amountBeforeTax.value"