title: Avoid angularJS partial views to be cached in IE
body: <p>I'm working on an ASP.NET MVC application that also has some angularJS. I have a main page that has different tabs that when you click them they load an angular partial view. This is how the main page looks like:</p>
  
  <pre><code>{ ... }     
  &lt;div class="widget-div" ng-controller="mainController"&gt; 
      &lt;div class="widget-body"&gt;
          &lt;div class="tabs-left"&gt;
              &lt;ul id="demo-pill-nav" class="nav nav-tabs tabs-left" style="width: 160px"&gt;
                  &lt;li ng-class="getMenuClass('/search')"&gt;
                      &lt;a href="javascript:void(0);" ng-click="selectPage('search')"&gt;Search&lt;/a&gt;
                  &lt;/li&gt;
                  &lt;li ng-class="getMenuClass('/addressVerification')"&gt;
                      &lt;a href="javascript:void(0);" ng-click="selectPage('addressVerification')"&gt;Address Verification&lt;/a&gt;
                  &lt;/li&gt;
                  &lt;li ng-class="getMenuClass('/dashboard')"&gt;
                      &lt;a href="javascript:void(0);" ng-click="selectPage('dashboard')"&gt;Dashboard&lt;/a&gt;
                  &lt;/li&gt;
                  &lt;li ng-class="getMenuClass('/editProfile')"&gt;
                      &lt;a href="javascript:void(0);" ng-click="selectPage('editProfile')"&gt;Update Profile&lt;/a&gt;
                  &lt;/li&gt;               
              &lt;/ul&gt;
              &lt;div class="tab-content"&gt;
                  &lt;div class="active tab-pane"&gt;
                      &lt;ng:view /&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;  
  &lt;/div&gt;
  { ... } 
  </code></pre>
  
  <p>In the main controller, the selectPage method looks like:</p>
  
  <pre><code>$scope.selectPage = function (page) {
      //not relevant code removed here
      $location.path("/" + page);
  };
  </code></pre>
  
  <p>And of course I have defined the routes like:</p>
  
  <pre><code>$routeProvider.when("/search", {
      templateUrl: "/Scripts/app/views/search.html"
  });
  </code></pre>
  
  <p>Now, what I need is these partial views to not get cached, at least while in development. For that I used the method provided <a href="https://stackoverflow.com/a/14721340/1329771">here</a>:</p>
  
  <pre><code>myApp.run(function($rootScope, $templateCache) {
     $rootScope.$on('$viewContentLoaded', function() {
        $templateCache.removeAll();
     });
  });
  </code></pre>
  
  <p>That worked perfect except in Internet Explorer, which always will load the cached version even when hitting Ctrl+F5.</p>
  
  <p>Also, I tried setting the HTTP headers in the layout html, like this:</p>
  
  <pre><code>&lt;meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" /&gt;
  &lt;meta http-equiv="Pragma" content="no-cache" /&gt;
  &lt;meta http-equiv="Expires" content="-1" /&gt;
  </code></pre>
  
  <p>But that didn't work.</p>
  
  <p>So my question is if there is any way to avoid this behavior.</p>