Overriding individual angular-ui templates

I'm using a bootstrap theme in combination with the excellent angular-ui.

I wanted to better adjust the look and feel of the default calendar, but all the other widgets were working just fine with the embedded templates.

Angular-ui uses the templateCache service to embed the templates in the .js file. We can take advantage of this by invalidating the widget's template entry in the template cache:

angular.module('myApp', ['ui.bootstrap']).run(
  ['$templateCache', function($templateCache){
    $templateCache.put('template/datepicker/datepicker.html', undefined);
  }
]);

It has to be done in a run block at the module level, before Angular tries to fetch the template. When angular finds the directive it doesn't find the embedded template in the cache, sot it fetches it from the server.