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 () {
                "ajax": {
                    "url": "/Home/GetData",
                    "type": "GET",
                    "datatype": "json"
                "columns": [
                    { "data": "col1" },
                    { "data": "col2" },
                    { "data": "col3" },
                    { "data": "col4" }


<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 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
                <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 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 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>
                                    <span class="text-success">
                            <div class="modal-footer">
                                <button type="button" class="btn btn-danger rounded-0" data-dismiss="modal">Close</button>
                <table id="dataTable" class="table table-bordered table-striped" ;>

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 =;
                //XLSX from js-xlsx library , which I will add in page view page  
                var workbook =, { 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   
                else {
                    $scope.Message = "No data found";
            reader.onerror = function (ex) {

    // Save excel data to our database  
    $scope.SaveData = function (excelData) {
            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