angularjs: $http is cached - angularjs

Question

So I have a service like that:
.service("checkSystemStatus", ["$http", "statusUrl", function($http, statusUrl){
return $http({method: "GET", url: statusUrl, cache: false});
}])
With this markup:
<li ng-mouseenter="checkStatus()">
<i class="fa fa-info-circle"></i>
<div class="info-container">
<h4>System Info</h4>
<table class="system-info">
<tr ng-repeat="(key, value) in systemInfo">
<td>{{key}}</td>
<td>{{value}}</td>
</tr>
</table>
</div>
</li>
and this function:
$scope.checkStatus = function(){
$scope.systemInfo = {};
checkSystemStatus.then(function(success){
$scope.systemInfo.running = success.data.jobs_running;
$scope.systemInfo.queued = success.data.jobs_queued;
$scope.systemInfo.cached = success.data.jobs_cached;
$scope.systemInfo.active_threads = success.data.threads_active;
$scope.systemInfo.server_address = success.data.server_address;
$scope.systemInfo.server_port = success.data.server_port;
console.log($scope.systemInfo);
})
}
The issue is I always get the same values for systemInfo, anytime I hover the info icon, I can't see any XHR requrest in the console except for the first one, that happens on loading the page and NOT when I hover the mouse on the tag.
The only way to solve this so far has been adding a parameter at the end of the url like
?time=unixtime to get a new url each time, but what about a cleaner solution without trailing params? Is it possible?

Answer 1

Well, it not only depends on the "AngularJS"-Cache but also on the Browser and Server cache settings. Check what kind of Cache-Headers the server in his responses sends to the Client. Adding a "timestamp" parameter to the REST-URL is one trick to avoid browser based caching - yes.
But in general: That's the way a client-server communication is intended to be. I would suspect that the Server sends some Vary, ETag, Cache-Expire etc. headers which will match.

Answer 2

Try to add these http headers into the server's response:
Cache-Control:no-cache, no-store, must-revalidate
Expires:-1
Pragma:no-cache

Answer 3

Try like this
.service("checkSystemStatus", ["$http", "statusUrl", '$q', function($http, statusUrl, $q){
this.GetData = function(){
$http.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';
return $http({
method: "GET",
url: statusUrl,
cache: false //no need to use this, caching is false by default
}).
then( function(response){
if (response.data) {
return response.data;
}
else
return $q.reject('Request failed');
});
}
}]);
Controller part
$scope.checkStatus = function(){
$scope.systemInfo = {};
checkSystemStatus.GetData().then(function(data){
$scope.systemInfo.running = data.jobs_running;
$scope.systemInfo.queued = data.jobs_queued;
$scope.systemInfo.cached = data.jobs_cached;
$scope.systemInfo.active_threads = data.threads_active;
$scope.systemInfo.server_address = data.server_address;
$scope.systemInfo.server_port = data.server_port;
console.log($scope.systemInfo);
})
}

Answer 4

As other answers tell you: the browser may choose to cache the response if the appropriate response headers from the server is not set. Set the response headers in MajoBs answer.
If you are unable to update the response headers from the server you could make sure that the url is unique for every request. You can do this by adding a timestamp to the url:
.service("checkSystemStatus", ["$http", "statusUrl", function($http, statusUrl){
statusUrl = statusUrl + '?' + Date.now();
return $http({method: "GET", url: statusUrl, cache: false});
}])