Refresh html table data at regular interval using Angularjs

Question

I'm trying to refresh the html table data for every ten seconds by invoking GetTicketDetails method using $interval service, but my view is not reflecting the changes. Below is my Java Script Code section for binding data:

$scope.GetTicketDetails = function () {
    $http.get(CMSRestServiceURL+"getalltickets")
               .success(function (response) {                      
                   $scope.ticketdetails = response;                                              
               });                  
};

Below is $interval code:

$interval(function () {
    $scope.GetTicketDetails();        
}, 10000);

Below is my html:

<table id="tblticketdetails" class="table table-condensed table-bordered ticketdetailstablestyle">
                        <thead>
                            <tr>
                                <th class="tableheadingstyle">Ticket ID</th>
                                <th class="tableheadingstyle">Created DateTime</th>
                                <th class="tableheadingstyle">Customer ID</th>
                                <th class="tableheadingstyle">Subject</th>
                                <th class="tableheadingstyle">Description</th>
                                <th class="tableheadingstyle">Status</th>
                                <th class="tableheadingstyle">Edit Ticket</th>
                            </tr>
                        </thead>
                        <tbody class="searchable">
                            <tr ng-repeat="ticket in ticketdetails">
                                <td>{{ ticket.TicketID }}</td>
                                <td>{{ ticket.CreatedDateTime }}</td>
                                <td>{{ ticket.CustomerID }}</td>
                                <td>{{ ticket.Subject }}</td>
                                <td>{{ ticket.Description }}</td>
                                <td ng-switch on="ticket.Status">
                                    <span class="labelstatus label-danger" ng-switch-when="open">Open</span>
                                    <span class="labelstatus label-info" ng-switch-when="pending">Pending</span>
                                    <span class="labelstatus label-primary" ng-switch-when="work in progres">Work in Progress</span>
                                    <span class="labelstatus label-success" ng-switch-when="resolved">Resolved</span>
                                    <span class="labelstatus label-warning" ng-switch-when="not resolved">Not Resolved</span>
                                    <span class="labelstatus label-warning" ng-switch-when="violated">Violated</span>
                                </td>
                                <td>
                                    <button class="btnEdit btn-warning" ng-click="Edit(ticket)">Edit</button>
                                </td>
                            </tr>
                        </tbody>
                    </table>

I've tried $scope.$apply() and $scope.$digest(). But after that also, the changes didn't reflect in my view. Any help is appreciated. Thanks in advance.

I've tried without $apply also. Changes are not reflecting. One thing I noticed is the view changes after I opened developer tools. — Bharath, Oct 25 '15 at 13:38
add a console.log in your GetTicketDetails function after $scope.ticketdetails = response; . See if it is updating everytime. — Tarun Dugar, Oct 25 '15 at 13:51
Yes. I've checked it. I'm getting data every ten seconds. Actually the veiw gets refreshed, the moment i opened the developer tools in ie11. — Bharath, Oct 25 '15 at 14:00

Bharath · Accepted Answer · 2021-05-12T13:37:49.177

After long hours, I figured out the problem. I checked the application in chrome and the data was updating instantly. Then I understood that this was a problem related only to IE browser. IE stores the $http.get request in cache and renders the data from cache next time for the same request, instead of populating the updated data.

Adding the below section to your angular app will resolve the problem:

app.config(['$httpProvider', function ($httpProvider) {
//initialize get if not there
if (!$httpProvider.defaults.headers.get) {
    $httpProvider.defaults.headers.get = {};
}        
//disable IE ajax request caching
$httpProvider.defaults.headers.get['If-Modified-Since'] = 'Mon, 26 Jul 1997 05:00:00 GMT';
// extra
$httpProvider.defaults.headers.get['Cache-Control'] = 'no-cache';
$httpProvider.defaults.headers.get['Pragma'] = 'no-cache';
}]);

Thanks to cnmuc: Angular IE Caching issue for $http

Refresh html table data at regular interval using Angularjs

1 Answers1