Browser does not detect changes in AngularJS

Question

Im developing an AngularJS application using IDE WebStorm and Safari browser.

Everything has worked perfectly so far, but I recently encapsulated some HTLM in a template that I use via a directive:

 .directive('referenceValue', [function ($scope) {
    return {
        restrict: 'E',
        templateUrl: "views/citizenprofile/reference/reference.html",
        controller: "referenceValueCtrl"
    }
}])

I "call" the directive the normal way, nothing fancy <reference-value></reference-value>

When I edit the reference.html the browser only detects the changes in the first edit.. If I edit reference.html a second time and update the browser then the change is not detected. If I restart the browser the change is detected again. So I basically need to restart my browser each time I want to debug the HTML code. Changes in the Controller is detected at every edit.

Can anyone tell me how to fix this error?

Answer 1

If you are using google chrome press CTRL+SHIF+J and on the network tab check 'Disable Cache'

Hope it helps

Answer 2

Your template is being cached. There are a couple of work arounds. Either use Chrome's dev tools to disable cache when the dev tools is open, or use the $templateCache.remove() in your application.

app.run(function($rootScope, $templateCache) {
   $rootScope.$on('$viewContentLoaded', function() {
      $templateCache.removeAll();
   });
});

Find more info on removing the template cache here.