title: ui-bootstrap-tpls failed to load template
body: <p>I've inherited an angular project, and it's having problems loading the ui-bootstrap-tpls modules.</p>
  
  <p>For each directive it's trying to use from bootstrap, I get something similar to the following:</p>
  
  <p>Error: [$compile:tpload] Failed to load template: template/datepicker/popup.html</p>
  
  <p>I've read about the need to include the tpls version of the ui-bootstrap lib.  (ui-bootstrap-tpls-0.10.0.js (instead of ui-bootstrap.js)), but having done that as well as every permutation of module injected into my module as a dependency (ui.bootstrap, ui.bootstrap.tpls, template/datepicker/datepicker.html'), but I can't beat it.</p>
  
  <p>Here're my includes: </p>
  
  <pre><code>&lt;html class="no-js" ng-app="hiringApp"&gt;
  &lt;head&gt;
      &lt;meta charset="utf-8"&gt;
      &lt;title&gt;@ViewBag.Title&lt;/title&gt;
      &lt;meta content="IE=edge" http-equiv="X-UA-Compatible"&gt;
      &lt;meta content="width=device-width, initial-scale=1.0" name="viewport"&gt;
      &lt;meta name="layout" content="IRLayout"&gt;
  
      &lt;!-- styles IRLayout--&gt;
      &lt;link rel="stylesheet" href="//cdn.datatables.net/1.10.0-beta.1/css/jquery.dataTables.css"&gt;
      &lt;!-- BootStrap --&gt;
      &lt;link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"&gt;
  
      &lt;!-- font-awesome --&gt;
      &lt;link href="//netdna.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet"&gt;
  
      &lt;link rel="stylesheet" href="@Url.Content("~/content/css/layout.css")"&gt;
      &lt;link rel="stylesheet" href="@Url.Content("~/content/css/normalize.css")"&gt;
      &lt;link rel="stylesheet" href="@Url.Content("~/content/css/main.css")"&gt;
      &lt;link rel="stylesheet" type="text/css" href="@Url.Content("~/Content/css/Upload.css")"&gt;
  
      &lt;link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/themes/smoothness/jquery-ui.css" /&gt;
      &lt;link rel="stylesheet" type="text/css" href="@Url.Content("~/content/css/styles.css")"&gt;
      &lt;link rel="stylesheet" type="text/css" href="@Url.Content("~/content/css/site-specific.css")"&gt;
      &lt;link rel="stylesheet" type="text/css" href="@Url.Content("~/content/css/rating.css")"&gt;
  
      &lt;!-- Upload --&gt;
      @*&lt;link rel="stylesheet" type="text/css" href="@Url.Content("~/Content/Upload.css")"&gt;*@
  
      &lt;!-- Header Scripts--&gt;
      &lt;!-- Jquery &amp; Jquery UI --&gt;
      &lt;script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
      &lt;script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/jquery-ui.min.js"&gt;&lt;/script&gt;
      &lt;script src="@Url.Content("~/Scripts/Vendor/underscore-min.js")"&gt;&lt;/script&gt;
  
      &lt;!-- BootStrap --&gt;
      &lt;!-- Validate --&gt;
      &lt;script src="//ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.min.js"&gt;&lt;/script&gt;
      &lt;script src="//ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/additional-methods.min.js"&gt;&lt;/script&gt;
  
      &lt;!-- Analytics --&gt;
      &lt;script src="//cdn.datatables.net/1.10.0-beta.1/js/jquery.dataTables.js"&gt;&lt;/script&gt;
      &lt;script src="//cdnjs.cloudflare.com/ajax/libs/raphael/2.1.2/raphael-min.js"&gt;&lt;/script&gt;
      &lt;script src="//cdnjs.cloudflare.com/ajax/libs/graphael/0.5.1/g.raphael-min.js"&gt;&lt;/script&gt;
  
      &lt;!-- Angular --&gt;
            &lt;!--  
            &lt;script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.22/angular.min.js"&gt;&lt;/script&gt;
            &lt;script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.22/angular-animate.min.js"&gt;&lt;/script&gt;
            &lt;script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.22/angular-resource.min.js"&gt;&lt;/script&gt;
            &lt;script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.10/angular-ui-router.min.js"&gt;&lt;/script&gt;
              --&gt;
      &lt;script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.22/angular.js"&gt;&lt;/script&gt;
      &lt;script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.22/angular-animate.js"&gt;&lt;/script&gt;
      &lt;script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.10.0.js"&gt;&lt;/script&gt;
      &lt;script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.22/angular-resource.js"&gt;&lt;/script&gt;
      &lt;script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.10/angular-ui-router.js"&gt;&lt;/script&gt;
  
      &lt;script src="@Url.Content("~/Scripts/app.js")"&gt;&lt;/script&gt;
      &lt;script src="@Url.Content("~/Scripts/controllers.js")"&gt;&lt;/script&gt;
      &lt;script src="@Url.Content("~/Scripts/directives.js")"&gt;&lt;/script&gt;
      &lt;script src="@Url.Content("~/Scripts/filters.js")"&gt;&lt;/script&gt;
      &lt;script src="@Url.Content("~/Scripts/services.js")"&gt;&lt;/script&gt;
      &lt;script&gt;
          angular.module("hiringApp").constant("$userProvider", @Model.User.SystemRoles);
          angular.module("hiringApp").constant("$jobProvider", '');
      &lt;/script&gt;
  
      &lt;!-- Upload --&gt;
      &lt;script src="@Url.Content("~/content/js/plupload.full.js")"&gt;&lt;/script&gt;
      &lt;script src="@Url.Content("~/content/js/UploadImage.js")"&gt;&lt;/script&gt;
  
      &lt;script type='text/javascript' src='//ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js'&gt;&lt;/script&gt;
      &lt;script src="~/Content/js/audio/irAudioRecorder.js"&gt;&lt;/script&gt;
      @RenderSection("script", required: false)
  &lt;/head&gt;
  </code></pre>
  
  <p>Here's my app module:</p>
  
  <pre><code>var hiringApp = angular.module('hiringApp', ['ui.router', 'ngAnimate', 'ngResource', 'filters', 'ui.bootstrap', 'ui.bootstrap.tpls']);
  </code></pre>
  
  <p>Here's the error: </p>
  
  <pre><code>GET http://localhost:54720/template/tooltip/tooltip-popup.html 404 (Not Found) angular.js:8539
  7Error: [$compile:tpload] Failed to load template: template/tooltip/tooltip-popup.html
  http://errors.angularjs.org/1.2.22/$compile/tpload?p0=template%2Ftooltip%2Ftooltip-popup.html
      at http://ajax.googleapis.com/ajax/libs/angularjs/1.2.22/angular.js:78:12
      at http://ajax.googleapis.com/ajax/libs/angularjs/1.2.22/angular.js:6900:17
      at http://ajax.googleapis.com/ajax/libs/angularjs/1.2.22/angular.js:8098:11
      at wrappedErrback (http://ajax.googleapis.com/ajax/libs/angularjs/1.2.22/angular.js:11555:78)
      at wrappedErrback (http://ajax.googleapis.com/ajax/libs/angularjs/1.2.22/angular.js:11555:78)
      at wrappedErrback (http://ajax.googleapis.com/ajax/libs/angularjs/1.2.22/angular.js:11555:78)
      at http://ajax.googleapis.com/ajax/libs/angularjs/1.2.22/angular.js:11688:76
      at Scope.$eval (http://ajax.googleapis.com/ajax/libs/angularjs/1.2.22/angular.js:12658:28)
      at Scope.$digest (http://ajax.googleapis.com/ajax/libs/angularjs/1.2.22/angular.js:12470:31)
      at Scope.$apply (http://ajax.googleapis.com/ajax/libs/angularjs/1.2.22/angular.js:12762:24) 
  </code></pre>