title: How to remove angular $modal cache?
body: <p>In my angular app I have multiple of <code>$modal</code> instances which are created like:</p>
  
  <pre><code>var modalInstance = $modal.open({
          templateUrl: APP_CONFIG.TPL_PATH + '/path/template.html',
          controller: 'TemplateController'//...
  });
  </code></pre>
  
  <p>The problem is that after viewing these modals they are cached, and if I change them, I'm forced to clear the browsers cache. Not a problem on dev machine, but an issue, when I will provide this app to potential users.</p>
  
  <p>I've found these as "solutions" so far:</p>
  
  <pre><code>// first one
  $rootScope.$on('$stateChangeStart', function(event, next, current) {
      $templateCache.remove(current.templateUrl);
  }); // doesn't work because $modal doesn't change state
  
  // second one
  $rootScope.$on('$viewContentLoaded', function() {
      $templateCache.removeAll();
  }); // mess Bootstrap UI which adds default partials directly to the $templateCache
  
  // third one
  $modal.open({
              templateUrl: '/app/components/your-modal.html?bust=' + Math.random().toString(36).slice(2),
              controller: 'YourModalController'
          }); // ugly and inefficient - I have to change multiple code blocks for every modal
  </code></pre>
  
  <p>Are there any sufficient solutions? Thank you in advance.</p>
  
  <p><strong>EDIT</strong></p>
  
  <p>An extra advice I got is changing template data and putting it into .js files (i.e <code>&lt;p&gt;Data&lt;/p&gt;</code> to <code>&lt;p&gt;{{data}}&lt;/p&gt;</code> and <code>$scope.data = 'Data'</code> in .js). Two problems I see here. How can I be sure that the .js file isn't cached by browser? How can I add extra changes to template structure (extra variables), if it's cached (i.e to <code>&lt;p&gt;{{data}}&lt;/p&gt;&lt;img src='{{imageUrl}}&gt;'</code>)?</p>