Bootstrap modal and AngularJS

Question

I am using AngularStrap in my application. I am tying to implement the modal feature of bootstrap. The problem is that I can't make it to show up my template modal. Here is a link to plunker. My template's id is test and I am referring in (like explained in the docs) by template='#test' but I am getting an error: Uncaught TypeError: Cannot set property 'display' of undefined.

Answer 1

The docs state the following for template:

If provided, overrides the default template, can be either a remote URL or a cached template id.

In angular a template can either be loaded from a remote source or defined directly in a script tag. All templates are loaded via an instance of $templateCache. So, to make your modal show you need to change the definition of your modal to look like:

<script type="text/ng-template" id="test">
    <div class="modal" tabindex="-1" role="dialog">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header" ng-show="title">
                    <button type="button" class="close" ng-click="$hide()">&times;</button>
                    <h4 class="modal-title" ng-bind="title"></h4>
                </div>
                <div class="modal-body" ng-bind="content"></div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" ng-click="$hide()">Close</button>
                </div>
            </div>
        </div>
    </div>
</script>

Updated plunker to demonstrate.