$http.get cache false is not working - angularjs

Question

i am using this code to call the method but it is still keeping the cache and not refreshing the data on the screen
(function () {
'use strict';
app.controller('categoryController', ['$http', '$location', 'authService', 'ngWEBAPISettings', categoryController]);
////categoryController.$inject = ['$location'];
function categoryController($http, $location, authService, ngWEBAPISettings) {
/* jshint validthis:true */
//Creating headers for sending the authentication token along with the system.
var authheaders = {};
authheaders.Authorization = 'Bearer ' + authService.getToken();
//ForDate
var d = new Date();
var vm = this;
vm.title = 'Category';
////debugger;
////Vadiable for Grid
vm.Category = [];
////Vadiable for Adding
vm.category = {
CategoryID: 0,
CategoryName:"",
CreatedOn:d,
UpdatedOn:d
};
////Vadiable for Editing
vm.editCategory = {};
vm.getCategory = function () {
////debugger;
////authheaders.cache = false;
var config = {
headers: {
'Authorization': authheaders.Authorization
},
cache: false,
};
//For Grid
$http.get(ngWEBAPISettings.apiServiceBaseUri + "api/Categories", config)
.then(function (respose) {
//success
////debugger;
angular.copy(respose.data, vm.Category);
////debugger;
//var i = 2;
////debugger;
}, function (response) {
//failure
////debugger;
}).finally(function () {
////debugger;
//finally
}
);
}
vm.add = function ()
{
////authheaders.Content-Type="application/x-www-form-urlencoded";
////debugger;
vm.category.CreatedOn = d;
vm.category.UpdatedOn = d;
$http.post(ngWEBAPISettings.apiServiceBaseUri + "api/Categories", JSON.stringify(vm.category), { headers: authheaders })
.then(function (repose) {
////success
////debugger;
vm.Category.push(repose.data);
alert('Category has been addded successfully');
$('#addModal').modal('hide');
}, function (response) {
////failure
////debugger;
alert('An error has been occurred while adding the data');
}).finally(function () {
vm.category = {};
});
}
vm.edit = function (id) {
///debugger;
////alert(id);
$('#btnSubmit').html('Update');
$("#btnSubmit").removeAttr("ng-click");
$("#btnSubmit").attr("ng-click", "vm.edit()");
$('#addModal').modal('show');
}
vm.delete = function (id) {
////debugger;
alert(id);
}
activate();
function activate() { vm.getCategory(); }
}
})();
here is the html
<h1>{{vm.title}}</h1>
<div id="addModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="gridSystemModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="gridSystemModalLabel">Add Category</h4>
</div>
<div class="modal-body">
<div class="row">
<div class="col-md-12">
<div class="form-group">
<label class="control-label col-md-3">Category Name</label>
<input class="form-control col-md-9" type="text" name="txtcategoryname" id="txtcategoryname" maxlength="200" ng-model="vm.category.CategoryName" required />
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" id="btnSubmit" class="btn btn-primary" ng-disabled="!vm.category.CategoryName" ng-click="vm.add()">Add</button>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12 col-md-offset-10">
<span class="fa fa-plus fa-200px"></span> Add New Record
</div>
</div>
<table class="table table-responsive table-hover">
<thead>
<tr>
<th>Category Name</th>
<th>Created On</th>
<th></th>
</tr>
</thead>
<tbody>
<tr ng-repeat="cat in vm.Category">
<td style="vertical-align:middle">{{cat.categoryName}}</td>
<td style="vertical-align:middle">{{cat.createdOn | date:'dd-MMM-yyyy' }}</td>
<td>
<input type="button" class="btn btn-sm btn-primary" ng-click="vm.edit(cat.categoryID)" value="Edit" />
<input type="button" class="btn btn-sm btn-primary" ng-click="vm.delete(cat.categoryID)" value="Delete" />
</td>
</tr>
</tbody>
</table>
<script type="text/javascript">
function openAddModal() {
$('#addModal').modal('show');
$('#btnSubmit').val('Add');
}
</script>
here it is get called from
function activate() { vm.getCategory(); }

Answer 1

It does disable cache for all get requests.
myApp.config([
// Diable IE Cache for $http.get requests
'$httpProvider', function ($httpProvider) {
// Initialize get if not there
if (!$httpProvider.defaults.headers.get) {
$httpProvider.defaults.headers.get = {};
}
// Enables Request.IsAjaxRequest() in ASP.NET MVC
$httpProvider.defaults.headers.common["X-Requested-With"] = 'XMLHttpRequest';
// Disable IE ajax request caching
$httpProvider.defaults.headers.get['If-Modified-Since'] = '0';
}
]);

Answer 2

According to this Angular link https://docs.angularjs.org/api/ng/service/$http caching is disabled by default. Check if you have a global setting somewhere for the cache and disable if needed.
Also try this solution by adding a datetime parameter in querystring.
Destroying AngularJS $Http.Get Cache

Answer 3

this code works for me
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';
}]);