For some reason the modal box works just fine but it does not load any templates I specify.

My Controller has this code;

var brnSearchModal = $modal({ scope: $scope, template: "app/rrn/searchBrn.html", contentTemplate: false, html: true, show: false });

$scope.showModal = function () {
    brnSearchModal.$promise.then(brnSearchModal.show);
};

My HTML looks like this;

<button data-ng-click="showModal()" type="button" class="btn btn-info" data-animation="am-fade-and-slide-top">
    BRN Lookup
</button>

And my template is in a file and looks like this;

<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">Hello, World!</h4>
            </div>
            <div class="modal-body" ng-bind="content">Lorem ipsum dolor.</div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" ng-click="$hide()">Close</button>
            </div>
        </div>
    </div>
</div>

There is no error everything seems to be working fine but the template does not load. If I debug angular-strap at one point the template is loaded but then disappears in and leaves a blank modal.

For some reason the modal box works just fine but it does not load any templates I specify.

My Controller has this code;

var brnSearchModal = $modal({ scope: $scope, template: "app/rrn/searchBrn.html", contentTemplate: false, html: true, show: false });

$scope.showModal = function () {
    brnSearchModal.$promise.then(brnSearchModal.show);
};

My HTML looks like this;

<button data-ng-click="showModal()" type="button" class="btn btn-info" data-animation="am-fade-and-slide-top">
    BRN Lookup
</button>

And my template is in a file and looks like this;

<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">Hello, World!</h4>
            </div>
            <div class="modal-body" ng-bind="content">Lorem ipsum dolor.</div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" ng-click="$hide()">Close</button>
            </div>
        </div>
    </div>
</div>

There is no error everything seems to be working fine but the template does not load. If I debug angular-strap at one point the template is loaded but then disappears in and leaves a blank modal.

• javascript
• angularjs
• twitter-bootstrap
• angular-strap

4 Answers 4

Remove ng-show="title", ng-bind="title" from the template.

Try adding the bs-modal attribute: see examples

<button data-ng-click="showModal()" type="button" class="btn btn-info" data-animation="am-fade-and-slide-top" bs-modal="brnSearchModal">
    BRN Lookup
</button>

Otherwise use the data-template attribute directly without using the JS to show the modal:

<button type="button" class="btn btn-info" data-animation="am-fade-and-slide-top" data-template="app/rrn/searchBrn.html" bs-modal="modal">
    BRN Lookup
</button>

I think when you put bs-modal="modal" modal is somehow pre-defined in the angular-strap library.

you should remove ng-show="title" , ng-show="content" or ng-bind="title" from the template. You should make sure that the template has no ng-show.

I know it is an old question, but in case others are looking for a solution to the same problem. I found I had to explicitly set templateUrl to falsy when setting template to an html string