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"