ng-grid not binding with latest data after async XMLHttpRequest’s response

I have a AngularJS web application, I’m trying to upload a file to a server and while the upload is complete, I have to update ng-grid with the last uploaded file’s entry.

The requirement is that I show the progress of file upload and the entire application to be responsive when upload is in progress, I have achieved this but my ng-grid is updating in a particular scenario.

If I remain in the same page until the file is uploaded and the response comes, the grid is refreshing but when I move to another page and come back to the file upload page, and the response comes after, my grid is not getting refreshed.

This is my file upload js code,

var data = new FormData();
data.append('file', file);
var xhrRequest = Factory.uploadFileRequest('UploadFile');
xhrRequest.upload.addEventListener("progress", progressHandler, false);                

xhrRequest.onreadystatechange = function (e) {
};

xhrRequest.onload = function (e) {
    if (JSON.parse(e.currentTarget.responseText).Success == true) {
        $timeout(function () {
            $scope.LoadGrid();
            //showing success message here
        }, 2000);
    }
    else
    {
        //showing error message here                    
    }

};
xhrRequest.onerror = function (e) {                    
   //showing error message here                 
};
xhrRequest.send(data);

$scope.LoadGrid = function () {            
    Factory.callGet("Files").then(function (d) {

            $scope.gridData = d.data;
        }               
        $scope.totalItems = $scope.gridData.length;
    }, function error(err) {
        //Error Message
    });
}

gridData is my data-ng-grid value. I’m calling my LoadGrid method inside a $timeout already but still the grid is not refreshing with latest data. Any help would be much appreciated.

Source: New feed
Source Url ng-grid not binding with latest data after async XMLHttpRequest’s response