Using Angular UI Bootstrap modals

While working on a personal project I figured I'd use Bootstrap because then I wouldn't have to worry about styling. All was very well and using Angular.js together with Twitter Bootstrap totally made my day. But then I needed to show a modal dialog. I know how to do this but I stumbled upon the Angular UI directives for Bootstrap this seemed great. I mean, that's just awesome. Using the power of Angular's directives should get these modals up and running super fast. Or so I thought..

After skimming the docs and looking at the modal example I figured I'd give it a go. I set up my templates and wrote some code. Clicked on my button and then.. nothing. Just some error message.. My code looked like this, and from the docs I understood that this would be fine.

(function(){
    var app = angular.module('cmsRecipesModule', ['ui.bootstrap']);
    app.controller('cmsRecipesController', [
        '$scope',
        '$rootScope',
        'recipeService',
        '$modal',
        function($scope, $rootScope, recipeService, $modal){
            $scope.recipes = recipeService.recipes;

            $scope.deleteRecipe = function(id) {
                $modal.open({
                    templateUrl: '/templates/modal.html',
                    controller: 'ModalCtrl'
                });
            }
        }
    ]);

    app.controller('ModalCtrl', [
        '$scope',
        '$modalInstance',
        function($scope, $modalInstance){
            console.log('instance');
        }]);
})();

<div class="modal-header">
    <h3 class="modal-title">Weet je zeker dat je dit recept wilt verwijderen?</h3>
</div>
<div class="modal-body">
</div>
<div class="modal-footer">
    <button class="btn btn-primary" ng-click="ok()">OK</button>
    <button class="btn btn-warning" ng-click="cancel()">Cancel</button>
</div>

This was just like the docs told me to do it and should've worked just fine. But it didn't, my code wouldn't find the window and backdrop templates. So I added the template folder from angular-ui to my project but that led to another error telling me my template needed one root. And one root only. This bugged me, I did the same things with my template as the examples did and they worked fine. So then I turned to some more searching online an I found this Github issue. This person was having the same issues I had and the solution was simple. He made a 'beginners mistake' because he forgot to list ui.bootstrap.tpls as dependency for the module that was creating the modal window. After I added this dependency everything was working just fine. So, to everybody getting an error about their templateRoot when trying to use the modals from angular ui's bootstrap directives. Make sure you added ui.bootstrap.tpls.

My final code for the controller ended up like this:

(function(){
    var app = angular.module('cmsRecipesModule', ['ui.bootstrap', 'ui.bootstrap.tpls']);
    app.controller('cmsRecipesController', [
        '$scope',
        '$rootScope',
        'recipeService',
        '$modal',
        function($scope, $rootScope, recipeService, $modal){
            $scope.recipes = recipeService.recipes;

            $scope.deleteRecipe = function(id) {
                $modal.open({
                    templateUrl: '/templates/modal.html',
                    controller: 'ModalCtrl'
                });
            }
        }
    ]);

    app.controller('ModalCtrl', [
        '$scope',
        '$modalInstance',
        function($scope, $modalInstance){
            console.log('instance');
        }]);
})();