why does my bootstrap modal not open? - angularjs

Question

I have defined a bootstrap 3 modal in my code:
<script type="text/ng-template" id="modalTmpl">
<div class="modal show">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button ng-click="close()" type="button" class="close" data-dismiss="modal" aria-hidden="false">×</button>
<h4 class="modal-title">Modal title</h4>
</div>
<div class="modal-body">
<p>One fine body…</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>
<!-- /.modal -->
</script>
<div ng-controller="ModalDemoCtrl">
<modal></modal>
<button class="btn" ng-click="open()">Open me!</button>
<div ng-show="selected">Selection from a modal: {{ selected }}</div>
</div>
This is my angular code:
app.directive('modal', function($log) {
return {
restrict: 'E',
templateUrl: 'modalTmpl',
link: function(scope, element, attrs) {
self.element = element;
scope.close = function() {
$log.info('close!');
var modal = self.element.find('.modal');
//debugger;
modal.removeClass('show');
}
},
controller: function($scope, $attrs) {
}
};
var ModalDemoCtrl = function ($scope, $log) {
$scope.items = ['item1', 'item2', 'item3'];
$scope.open = function () {
};
};
When I click on open me it does not show the modal: ( Could it be the wrong bootstrap.css reference or something else?
plunkr :http://plnkr.co/edit/RhaUdB?p=preview

Answer 1

Why not try this by assigning modalTmpl id to your model
<button class="btn" ng-click="open()" data-toggle="modal" data-target="#modalTmpl">Open me!</button>

Answer 2

Try this in your modal template:
<div modal="isProductShowing" close="hideFullProduct()" options="productModalOptions">
Then in the controller:
$scope.isProductShowing = false;
$scope.currentFullProduct = null;
$scope.productModalOptions = {
backdropFade: true,
dialogFade:true
};
$scope.showFullProduct = function (productId) {
$scope.isProductShowing = true;
$scope.currentFullProduct = _.findWhere($scope.products, { id: productId });
}
Then you have to trigger the showFullProduct function from the main template:
<li ng-click="showFullProduct(product.productId)">

Answer 3

There is a lot of issues with this code.
First, your ModalDemoCtrl is not defined. Second, your open function is not defined. I move the button the MainCtrl to show how it can works. And declare open function to set the show to true which will be used in ng-show directive
http://plnkr.co/edit/uP3xB7?p=preview
<div type="text/ng-template" ng-show="show" id="modalTmpl">
<!-- Modal box -->
</div>
$scope.open = function() {
$scope.show = true;
};