Bootstrap Modal: Content from html page does not show within the modal - html

Question

I have a created a button when you click it a modal appears.
Here is the code:
<li style="float: right;">
<button id="myBtn" data-target="#myModal" ng-click="printDivModal('rollup-tab')">Modal Test</button>
</li>
In the js, the ng-click should open a model which contains data from stackModal.html
Here is the code in the js file:
$scope.printDivModal = function(divName) {
console.log('opening pop up');
var ModalInstance = $uibModal.open({
//animation: $ctrl.animationsEnabled,
templateUrl: 'app/views/modals/stackedModal.html',
size: 'lg',
/*
controller: function($scope) {
$scope.name = 'top';
}
*/
});
}
Here is the code for the model (stackedModal.html):
<!-- Modal -->
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">The Modal Header</h4>
</div>
<div class="modal-body">
<p>Text inside the modal.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
When I click the Model-Test button, all I see is a small white rectangle show on the screen. Nothing appears from the stackedModal html page. Why is this? Thanks.

Answer 1

Just remove modal wrappers div's, bootstrap-modal does it for you.
You just need to put modal content:
stackedModal.html:
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">The Modal Header</h4>
</div>
<div class="modal-body">
<p>Text inside the modal.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>