How to refresh table data after insert in AngularJS

I found code online to accomplish a task, to upload and insert data coming from an excel file into a SQL Server table.

How To Import Excel Data Into SQL Server Using Angular In MVC 5

The web application, I was able to adapt it to my needs and works to fulfill the upload and insert, just fine. But it has a problem, after the import has been completed (which is pretty quick) the table on the page, does not get refresh with the newly inserted data.

I think the event I am missing, should go after the SaveData function (see JavaScript code), but I am not knowledgeable enough to know what this event look like.

I was hoping to post a question on this forum and see if someone could lend a hand to fix this issue I am having.

here is some of the code I am using:

html view

<script type="text/javascript">

        $(document).ready(function () {
            $('#dataTable').DataTable({
                "ajax": {
                    "url": "/Home/GetData",
                    "type": "GET",
                    "datatype": "json"
                },
                "columns": [
                    { "data": "col1" },
                    { "data": "col2" },
                    { "data": "col3" },
                    { "data": "col4" }

                ]
            });
        });
</script>

<body ng-app="MyApp">
    <div class="container py-4" ng-controller="MyController">
        <div class="card">
            <div class="card-header bg-primary text-white">
                <h5>This List</h5>
            </div>
            <div class="card-body">
                <button style="margin-bottom:10px;" type="button" class="btn btn-primary rounded-0" data-toggle="modal" data-target="#myModal">
                    <i class="fa fa-file-excel-o"></i> Upload Excel File
                </button>
                <div class="modal" id="myModal">
                    <div class="modal-dialog">
                        <div class="modal-content">
                            <div class="modal-header">
                                <h4 class="modal-title">Upload Data</h4>
                                <button type="button" class="close" data-dismiss="modal">×</button>
                            </div>
                            <div class="modal-body">
                                <div class="col-md-12">
                                    <div class="input-group">
                                        <div class="custom-file">
                                            <input type="file" name="file" class="custom-file-input" onchange="angular.element(this).scope().UploadFile(this.files)" />
                                            <label class="custom-file-label" for="inputGroupFile04">Choose file</label>
                                        </div>
                                        <div class="input-group-append">
                                            <button class="btn btn-outline-secondary" type="button" ng-disabled="!SelectedFileForUpload" ng-click="ParseExcelDataAndSave()"><i class="fa fa-upload"></i> Upload</button>
                                        </div>
                                    </div>
                                    <span class="text-success">
                                        {{Message}}
                                    </span>
                                </div>
                            </div>
                            <div class="modal-footer">
                                <button type="button" class="btn btn-danger rounded-0" data-dismiss="modal">Close</button>
                            </div>
                        </div>
                    </div>
                </div>
                <table id="dataTable" class="table table-bordered table-striped" ;>
                    <thead>
                        <tr>
                            <th>col1</th>
                            <th>col2</th>
                            <th>col3</th>
                            <th>col4</th>
                        </tr>
                    </thead>
                </table>
            </div>
        </div>
    </div>
</body>

JavaScript (AngularJS)

var app = angular.module('MyApp', []);
app.controller('MyController', ['$scope', '$http', function ($scope, $http) {
    $scope.SelectedFileForUpload = null;
    $scope.UploadFile = function (files) {
        //used $scope.$apply because this function will be called from File input type control 
       // which is not supported 2 way binding
        $scope.$apply(function () {   
            $scope.Message = "";
            $scope.SelectedFileForUpload = files[0];
        })
    }
    //Parse Excel Data   
    $scope.ParseExcelDataAndSave = function () {
        var file = $scope.SelectedFileForUpload;
        if (file) {
            var reader = new FileReader();
            reader.onload = function (e) {
                var data = e.target.result;
                //XLSX from js-xlsx library , which I will add in page view page  
                var workbook = XLSX.read(data, { type: 'binary' });
                var sheetName = workbook.SheetNames[0];
                var excelData = XLSX.utils.sheet_to_row_object_array(workbook.Sheets[sheetName]);
                if (excelData.length > 0) {
                    //Save data   
                    $scope.SaveData(excelData);
                }
                else {
                    $scope.Message = "No data found";
                }
            }
            reader.onerror = function (ex) {
                console.log(ex);
            }

            reader.readAsBinaryString(file);
        }
    }
    // Save excel data to our database  
    $scope.SaveData = function (excelData) {
        $http({
            method: "POST",
            url: "/Home/ImportData",
            data: JSON.stringify(excelData),
            headers: {
                'Content-Type': 'application/json'
            }
        }).then(function (data) {
            if (data.status) {
                $scope.Message = excelData.length + " record inserted";
            }
            else {
                $scope.Message = "Failed";
            }
        }, function (error) {
            $scope.Message = "Error";
        })
    }
}])

Source: New feed
Source Url How to refresh table data after insert in AngularJS