Strange angular-ui datepicker dependency error

Question

Just re-installed some bower components but the components in question here were not updated, same 0.12.0 ui.bootstrap. Also using ui-router 0.2.13 to change state to another page.

The odd error message is

Error: [$compile:ctreq] Controller 'datepicker', required by directive 'daypicker', can't be found!

But when I look at the ui-bootstrap-tpls.js file, the datepicker controller is defined directly above daypicker, and should be picked up.

Could this be cause by an errant conflicting datepicker classname or something?

I know this is not much to go on but will update as I have time to add code. Seems like there might be a conflicting datepicker somewhere. It only happens on stateChange from one page to another. A complete flow of using the datepicker works fine until this last page. How can a controller dependency get missed if it's in the same file?

On the off chance anyone has seen this before, I'd be grateful for any guidance.

UPDATE Apr 23 15: was using a modal dialog with a form that would send the user to another page on OK click.

Answer 1

I had this error updating to ui.bootstrap 0.14.x.

I had overwritten the templates in own modules which caused the problems:

    angular.module("template/datepicker/datepicker.html", []).run(["$templateCache", function ($templateCache) {
    $templateCache.put("template/datepicker/datepicker.html",
      "<div ng-switch=\"datepickerMode\" role=\"application\" ng-keydown=\"keydown($event)\">\n" +
      "  <daypicker ng-switch-when=\"day\" tabindex=\"0\"></daypicker>\n" +
      "  <monthpicker ng-switch-when=\"month\" tabindex=\"0\"></monthpicker>\n" +
      "  <yearpicker ng-switch-when=\"year\" tabindex=\"0\"></yearpicker>\n" +
      "</div>");
    }]);

After removing the modules it worked again.

Originally I had changed the templates for using font-awesome icons instead of glyphicons. Now I override the glyphicon css class to change to font-awesome icons:

.glyphicon {
    font: normal normal normal 14px/1 ourIconFont;
}
.glyphicon-arrow-right:before,
.glyphicon-chevron-right:before {
    content: "\f054";
}
.glyphicon-arrow-left:before,
.glyphicon-chevron-left:before {
    content: "\f053";
}