Angular Template Cache - Clear Cache For Updated Template - angularjs

Question

I have an Angular that uses templates via directives. With one of the templates I have there was a bug. After making the change and refreshing my browser I noticed it was not using the file I fixed the bug in. I then learned about template caching. Great feature, but how do I clear out the cache for this updated template?
Note: I'm not using Angular's routes. Just accessing templates via a directive.

Answer 1

Did You use gulp or Grunt?
I personally use template-cache, what it does it collects all html partials/templates and put them into on js file.
pros:
* all templates are loaded at once in one js file.
cons:
* each time You change your html files You have to regenerate your template-cache. You could use gulp to watch your html files and each time You change something it automatically regenerate template-cache for You :)
to sum up, get interesting with gulp-watch and gulp-angular-templatecache to solve your problem.

Answer 2

As an extension of appending your template urls with a number, you might consider instead intercepting the request (all of them) and appending a number (version, release, date, etc) there. Something like this:
angular.module('my-app', []).config(function($httpProvider) {
$httpProvider.interceptors.push(function($window) {
return {
'request': function(config) {
// just yours (other libs, ie pagination might conflict with
// their own insertions)
if (!/^\/path-to-your-templates\//.test(config.url)) {
return config;
}
// pull a # from wherever you like, maybe the window - set by
// your backend layout engine?
if ($window.version) {
if (!config.params) {
config.params = {};
}
if (!config.params.v) {
config.params.v = $window.version;
}
}
return config;
}
};
});
});