Set Material DatePicker ReadOnly and insert selected Date in database using AngularJS in ASP.Net Web API

    //datepicker
    $scope.maxDate = new Date();
    $scope.data = { date: new Date() };   

    //button function to save data into database
    $scope.paymentDetails = {};
    $scope.btntext = "Submit";
    $scope.isDisabled = false;    
    $scope.submit = function () {
        var paymentDate = $filter('date')(new Date($scope.data.date), 'yyyy-MM-dd'); 
        var a = $scope.mydata.length;
        for (var i = 0; i < a; i++) {
            var paymentDetails = {
                "InvoiceId": $scope.SelectedInvoice.originalObject.InvoiceId,
                "InvoiceAmount": $scope.mydata[i].CurrencyAmount,
                "ReceiptAmount": $scope.mydata[i].replica,
                "DocNo": $scope.docNo,
                "DispatchId": $scope.mydata[i].DispatchId,
                "CreatedBy": $scope.username,
                "PaymentDate": paymentDate
            };
            if ($scope.mydata[i].replica == $scope.mydata[i].CurrencyAmount && typeof ($scope.docNo) != "undefined") {
                $http({
                    method: "POST",
                    url: apiUrl + "/api/Warehouse/addPaymentDetails",
                    data: JSON.stringify(paymentDetails),
                    dataType: 'json',
                    contentType: 'application/json'
                }).then(function (data, status) {
                    $scope.issueDetails = "";
                });                
            }                  
        }
        $window.alert("Payment updated!");
        //$route.reload();        
    } 
})
.config(function ($mdDateLocaleProvider) {    
    $mdDateLocaleProvider.formatDate = function (date) {
        return date ? moment(date).format('DD/MM/YYYY') : '';
    };
});

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>    
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.8/angular.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/angular-material/1.0.4/angular-material.css" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.8/angular-animate.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.8/angular-aria.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular-material/1.0.4/angular-material.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.8/angular-messages.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.2/moment.min.js"></script>
<md-datepicker ng-model="data.date" md-placeholder="Choose a date" md-max-date="maxDate"></md-datepicker>