I've a table with a popover for every cell as in the follow example:
the call to popover:
<td ng-repeat="i in c.installments" ng-class="{ 'first' : i.first, 'last' : i.last, 'advance' : i.advance.value > 0, 'edited' : i.edited, 'final-installment' : i.last }" popover-trigger="{{ popoverFilter(i) }}" popover-placement="top" popover-title="{{i.id == 0 ? 'Advance' : 'Installment ' + i.id}}" popover-append-to-body="true" popover-template="popoverTemplate(i)" ng-init="payment= i; newpayment= i.amount.rounded_value" >
The popover template:
<script type="text/ng-template" id="editPopoverTemplate.html">
<form name="editPayment">
<h2>{{payment.amount.value|currency:undefined:cents}}</h2>
<div class="form-group" ng-class="{ 'has-error' : editPayment.newpayment.$invalid }">
<label>New value:</label>
<input type="number" name="newpayment" ng-model="newpayment" class="form-control no-spinner" step="1" min="10" required>
<span ng-messages="editPayment.newpayment.$error" class="help-block" role="alert">
<span ng-message="required">The value is mandatory</span>
<span ng-message="min">The value is too low</span>
<span ng-message="max">The value is too hight</span>
</span>
</div>
<div class="btn-group btn-group-justified" role="group">
<div class="btn-group" role="group">
<button class="btn" type="button">Cancel</button>
</div>
<div class="btn-group" role="group">
<button class="btn btn-primary" type="button" ng-disabled="editPayment.$invalid">Save</button>
</div>
</div>
</form>
</script>
working example on plunker
I need to close the popover via a "Cancel" button inside the popover.
It's possible? I need to extend the Angular UI Bootstrap library to do that?
Any help is appreciated.
The solution suggested in the linked answer close the popover when user click inside the popover, or outside the popover, but i need to close it by "close" button inside the popover.
The proper solution using the new popover-is-open attribute, as mentioned by #icfantv below, allows the use of controller scopes. I placed a live example in Codepen, and it goes like this:
app = angular.module('ui.bootstrap.demo', ['ui.bootstrap']);
app.controller(
'myPopoverCtrl', ['$scope',
function($scope) {
// query popover
$scope.myPopover = {
isOpen: false,
templateUrl: 'myPopoverTemplate.html',
open: function open() {
$scope.myPopover.isOpen = true;
$scope.myPopover.data = 'Hello!';
},
close: function close() {
$scope.myPopover.isOpen = false;
}
};
}
]);
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.13.4/ui-bootstrap-tpls.min.js">
</script>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
</head>
<body
ng-app="ui.bootstrap.demo"
class="container">
<button
class="btn btn-danger"
ng-controller="myPopoverCtrl"
popover-template="myPopover.templateUrl"
popover-title="This is a popover"
popover-placement="bottom"
popover-is-open="myPopover.isOpen"
ng-click="myPopover.open()">Click me!</button>
<script type="text/ng-template"
id="myPopoverTemplate.html">
<h2 ng-bind="myPopover.data" />
<button class="btn btn-success"
ng-click="myPopover.close()">Close me!</button>
</script>
</body>
Original answer:
I spent the last two days on this problem, and finally came up with a simple enough hack. This goes on my controller:
$scope.close = function(e) {
el = angular.element(e.target).closest("td"); // `td` is the parent of my clickable
// element, in this case a `span`
$timeout(function() { // need $timeout so we don't conflict with the digest loop
el.children(":first").trigger('close'); // couldn't select the `span` element directly
});
},
Now we set up the close trigger on the provider:
app.config(['$tooltipProvider', function($tooltipProvider){
$tooltipProvider.setTriggers({
'click': 'close', // Clicks now only open the tooltip, 'close' events close it.
});
}]);
And on my custom popover HTML template:
<button type="button"
class="btn btn-sm btn-success pull-right"
ng-click="close($event)">Close</button>
Voila! I can now close the popover through the button!
This solution for several ng-repeat popovers via isOpen field of popover's scope.
angular.module('ui.bootstrap.demo', ['ui.bootstrap']).controller('PopoverDemoCtrl', function ($scope) {
$scope.template = 'myPopoverTemplate.html';
$scope.close = function(e) {
angular.element(e.target).parent().parent().parent().parent().scope().$parent.isOpen = false;
}
});
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.js"></script>
<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-2.5.0.js"></script>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<body ng-app="ui.bootstrap.demo">
<div ng-controller="PopoverDemoCtrl">
<button ng-repeat="item in ['First Popover','Second Popover','Third Popover']" popover-placement='bottom' uib-popover-template="template" popover-title="{{item}}" type="button" class="btn btn-default">{{item}}</button>
<script type="text/ng-template" id="myPopoverTemplate.html">
<div class="form-group">
<button class='btn btn-danger' ng-click='close($event)'>Close Me</button>
</div>
</script>
</div>
</body>
Starting with Angular UI Bootstrap release 0.13.4, we've added the ability to programmatically close tooltips and popovers via the tooltip-is-open or popover-is-open boolean attribute.
Related
Background:
So I am working with a modal box for searching through a list of task entries within a database using a form to narrow results. In this modal box, there is a custom radio button that's used for selecting whether or not the task is in progress (simple "Yes" or "No" option). The goal is to set the "No" option as the default value whenever the modal is called. Currently, I am using data-ng-init; however, this only works the first time the modal is opened. If the user closes the modal and reopens it, the default value is no longer set. Below is a sample of what this custom button looks like:
<div class="col-sm-6">
<div style="margin-bottom:10px">
<button type="button" data-ng-init="tr.taskInProgress('No')"
title="Task In Progress: No" data-ng-click="tr.taskInProgress('No')"
style="border:0;background:transparent">
<img src="../images/selected.png" data-ng-switch-when="No" />
<img src="../images/Deselect.png" data-ng-switch-when="Yes" />
<img data-ng-switch-when="" src="/nc/images/Deselect.png" /></button>
<text>No
</div>
(another similar button, but for 'yes')
</div>
In the accompanying .js file, the following is used to help populate this modal:
/*--------- Get Tasks ---------*/
tr.closeGetTaskModal = closeGetTasModal;
tr.displayGetTaskMessage = true;
tr.selectedStatusType = getStatusType;
tr.trackingId = '';
tr.performGetTask = performGetTask;
tr.isTaskInProgess = isTaskInProgress;
And, in the same .js file, the following function is used to modify the radio:
function isTaskInProgress(newValue) {
tr.isTaskInProgress = newValue;
}
I have been looking through others iterations on how they handle such cases, but I have been unlucky and have not found anything similar enough to what I am working with that works. I have tried setting the default in the Get Tasks section by modifying isTaskInProgress('No'), but this only locked the modal and I couldn't modify the option. I have tried setting the default inside the isTaskInProgress function; however, this only worked when the button was clicked, it failed to set a default. I tried seeing if data-ng-default would work; however, this didn't seem to be a recognized parameter. Does anyone have suggestions on how to modify this to get the desired results? Thank you all in advance for your help
Small Disclaimer
I am taking the liberty of assuming you are using UI Bootstrap (since I see bootstrap classes in your sample HTML), so will be using Uib Modal in my example.
Bootstrap Modal docs: https://angular-ui.github.io/bootstrap/#!#modal
Resolver / Callback Solution
You will most likely want to use the controller to set your tr.isTaskInProgress flag rather than using the ng-init directive (a bit more flexibility / readability).
Set tr.isTaskInProgress to false at the top of your target controller function, then pass its value to your modal as a property in a "Modal Resolve Object".
Bootstrap's explanation of the Resolve Object: https://angular-ui.github.io/bootstrap/#!#ui-router-resolves
Code
function MainController($scope, $uibModal) {
let vm = this;
vm.isTaskInProgress = false;
// When you open the modal, pass in the isTaskProgress value
let modalInstance = $uibModal.open({
templateUrl: 'myModalContent.html', // Points to the script template
controller: 'ModalController', // Points to the controller
controllerAs: 'mc',
windowClass: 'app-modal-window',
backdrop: 'static',
resolve: {
isTaskInProgress: function() {
// pass the task state to the Modal
return vm.isTaskInProgress;
}
}
});
// handle the value(s) passed back from the modal
modalInstance.result.then(returnedTaskState => {
// reassign the returned value of the modal
if (returnedTaskState !== null) {
vm.isTaskInProgress = returnedTaskState;
}
});
}
Working Example
https://plnkr.co/ryK7rG
In the interest of time, I've changed some of the variable / method names from what you have in your snippets. In the example, you can...
Set the In Progress value before you open the modal and the modal reflects the In Progress value.
Change the In Progress value inside the modal. On closing the modal, the value will be updated in the main page.
SO Snippet
I realize the SO Snippet window is not exactly the best place for this example, but just tossing my example code in here in case Plunker is inconvenient for some reason.
(function() {
"use strict";
let app = angular
.module("myApp", ["ui.bootstrap"])
.controller("MainController", MainController);
MainController.$inject = ["$scope", "$timeout", "$uibModal"];
function MainController($scope, $timeout, $uibModal) {
/**
* John Papa Style Guide
* https://github.com/johnpapa/angular-styleguide/blob/master/a1/README.md
* */
let vm = this;
// ==== scoped variables ====
vm.title = "AngularJS - Passing Toggled Values to a Modal"
vm.taskInProgress = false;
vm.taskButtonLocked = false;
// ==== functions hoist ====
vm.beginTask = _beginTask;
function _beginTask() {
vm.modalIsOpen = true;
// do work
openModal();
}
// ==== local functions ====
function openModal() {
// open the modal with configurations
let modalInstance = $uibModal.open({
templateUrl: 'myModalContent.html', // Points to my script template
controller: 'ModalController', // Points to my controller
controllerAs: 'mc',
windowClass: 'app-modal-window',
backdrop: 'static',
resolve: {
taskInProgress: function() {
// pass the task state to the Modal
return vm.taskInProgress;
}
}
});
// handle the value(s) passed back from the modal
modalInstance.result.then(returnedTaskState => {
// reset control values after modal is closed
vm.taskButtonLocked = false;
vm.modalIsOpen = false;
// reassign the returned value of the modal
console.log("returnedTaskState: ", returnedTaskState);
if (returnedTaskState !== null) {
vm.taskInProgress = returnedTaskState;
}
});
}
}
})();
(function() {
'use strict';
angular
.module('myApp')
.controller('ModalController', ModalController);
ModalController.$inject = ['$scope', '$timeout', '$uibModalInstance', 'taskInProgress'];
function ModalController($scope, $timeout, $uibModalInstance, taskInProgress) {
// Assign Cats to a Modal Controller variable
let vm = this;
vm.inProgress = taskInProgress;
console.log("taskInProgress", taskInProgress)
$scope.submit = function() {
$uibModalInstance.close(vm.inProgress);
}
$scope.close = function() {
$uibModalInstance.close(null);
}
}
})();
input[type="radio"]:hover {
cursor: pointer;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>AngularJS Plunk</title>
<link rel="stylesheet" href="style.css" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<!-- JQuery and Bootstrap -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<!-- Angular Stuff -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.8/angular.js"></script>
<!-- UI Bootstrap Stuff -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/2.5.0/ui-bootstrap-tpls.min.js"></script>
<!-- Our Angularjs App -->
<script type="text/javascript" src="app.js"></script>
</head>
<body ng-app="myApp" ng-controller="MainController as tr">
<!-- ==== MAIN APP HTML ==== -->
<div class="container" style="padding:1em;">
<div class="row">
<div class="col-xs-12">
<div class="jumbotron text-center">
<h2>{{ tr.title }}</h2>
<h4><em>SO Question #55362380</em></h4>
<h4><em>AngularJS - v1.7.8</em></h4>
</div>
</div>
<div class="col-xs-12">
<form>
<div class="form-group">
<h3>Task In Progress</h3>
<div>
<label>Yes:</label>
<input type="radio"
ng-checked="tr.taskInProgress"
ng-click="tr.taskInProgress = true"
ng-disabled="tr.modalIsOpen">
</div>
<label>No:</label>
<input type="radio"
ng-checked="!tr.taskInProgress"
ng-click="tr.taskInProgress = false"
ng-disabled="tr.modalIsOpen">
</div>
<div class="form-group">
<label>Open the modal:</label>
<button type="button"
class="btn btn-success"
ng-click="tr.beginTask();"
ng-disabled="tr.taskButtonLocked">
<span>Begin Task</span>
</button>
</div>
</form>
</div>
</div>
</div>
<!-- ==== MODAL HTML TEMPLATE ==== -->
<script type="text/ng-template" id="myModalContent.html">
<div class="modal-header">
<h3 class="modal-title" id="modal-title">I'm a modal!</h3>
</div>
<div class="modal-body" id="modal-body">
<form>
<div class="form-group">
<label>Task State:</label>
<div style="padding:1em;background:rgba(200, 214, 229,0.3);">
<p>
<span ng-show="!mc.inProgress">
<span>Task is not in progress... </span>
<i class="fa fa-check-square" aria-hidden="true"></i>
</span>
<span ng-show="mc.inProgress">
<span>Task is in progress... </span>
<i class="fa fa-spinner fa-spin" aria-hidden="true"></i>
</span>
</p>
</div>
</div>
<div class="form-group" style="padding-top:1em;">
<h3>Task In Progress</h3>
<div>
<label>Yes:</label>
<input type="radio"
ng-checked="mc.inProgress"
ng-click="mc.inProgress = true">
</div>
<label>No:</label>
<input type="radio"
ng-checked="!mc.inProgress"
ng-click="mc.inProgress = false">
</div>
</form>
</div>
<div class="modal-footer">
<button class="btn btn-primary" type="button" ng-click="submit()">OK</button>
<button class="btn btn-warning" type="button" ng-click="close()">Cancel</button>
</div>
</script>
</body>
</html>
I have used 2 button in the form. I want to disable button1 on initialisation though I have given ng-disabled="true" but whenever user clicks on button2, button1 get enabled. Can anyone tell me how to do this in angularjs ?
You don't need to do anything in the controller if you are not working with the scope variable inside the controller.
So just do something like:
angular.module("app",[]).controller("ctrl",function($scope){})
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="ctrl">
<button ng-disabled="first !== true"> one</button>
<button ng-click="first = true"> two</button>
</div>
You can call one function on click of second button and set the ng-disabled value to false.
DEMO
var myApp = angular.module('myApp',[]);
myApp.controller('MyCtrl',function($scope) {
$scope.inactive= true;
$scope.enableButton1 = function() {
$scope.inactive= false;
}
});
<div ng-app="myApp" ng-controller="MyCtrl">
<br><input type="button" ng-disabled="inactive" value="button1"/>
<br><input type="button" ng-click="enableButton1()" value="button2"/>
</div>
use scope variables and assign them to ng-disabled
angular.module("app",[])
.controller("ctrl",function($scope){
$scope.firstBtn = true;
$scope.secondBtn = false;
})
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="ctrl">
<button ng-disabled="firstBtn" > one</button>
<button ng-disabled="secondBtn" ng-click="firstBtn = false"> two</button>
</div>
Its very simple as given below:
JS
var app = angular.module('myApp', []);
app.controller('ctrl', function($scope) {
$scope.isDisabled = true;
$scope.toggleButton = function() {
$scope.isDisabled = !$scope.isDisabled;
}
});
HTML
<div ng-app='myApp'>
<div ng-controller='ctrl'>
<button ng-click='toggleButton()'>
Toggle
</button>
<button ng-disabled='isDisabled'>
I am button
</button>
</div>
</div>
Here is the jsfiddle link Jsfiddle demo
I use an input tag in angular-strap modal:
<div class="modal-body" >
<input type="text" placeholder="url" class="w-full" >
</div>
Then I type some words in it and close the modal with hide().
But next time I open the modal, I find that what I typed last time has gone.
Am I doing something wrong?
I made a working plunkr here: plunkr. Take note of making kmlUrl an object key instead of a straight var: AngularStrap bs-select not updating ng-model
The modal and page are now in sync with each other. The modal loads whatever is in $scope.model.kmlUrl and the page updates whenever you change it in the modal.
<div ng-controller="TestModal">
<button type="button" ng-click="openTestModal()">
Open Modal
</button>
<div ng-cloak="">
{{ model.kmlUrl }}
</div>
</div>
<script type="text/ng-template" id="test-modal.html">
<input type="text" placeholder="url" ng-model="model.kmlUrl">
<div class="modal-footer">
<button type="button" ng-click="closeTestModal()">Close</button>
</div>
</script>
(function(){
angular.module('test', ['mgcrea.ngStrap']);
angular.module('test').controller('TestModal', function($scope, $modal){
var modal = $modal({
scope: $scope,
title: 'Test Modal',
contentTemplate: 'test-modal.html',
show: false
});
$scope.model = {
kmlUrl: 'https://www.amazon.com'
};
$scope.openTestModal = function(){
modal.show();
};
$scope.closeTestModal = function(){
modal.hide();
};
});
})();
I am using AngularJS and Angular-UI Bootstrap tabs. This is my controller:
app.controller("SettingsCtrl", ['$scope','SettingsFactory','$stateParams', function($scope,SettingsFactory,$stateParams){
$scope.navType = 'pills';
$scope.saveLanguage = function()
{
console.log($scope.test.vari); // loged undefined
}
}]);
My view
<div class="row clearfix">
<tabset>
<tab heading="Jezik">
<form role="form" name="test">
<div class="form-group">
<label for="lang">Izaberite jezik</label>
<select class="form-control" ng-model="vari">
<option>Hrvatski</option>
<option>Srpski</option>
<option>Bosanski</option>
<option>Engleski jezik</option>
<option>Njemački jezik</option>
</select>
</div>
<button type="submit" class="btn btn-default" ng-click="saveLanguage()">Save</button>
</form>
</tab>
</div>
Can someone help me to see why is loging undefined when I am using Angular-UI Bootstrap Tabs. Is it creating own scope. How tu access model value ?
This code solved my problem (removed name atribute from form, added ng-model="test.vari", and added $scope.test= {} in my controller) :
<tabset>
<tab heading="Jezik">
<form role="form">
<div class="form-group">
<label for="lang">Izaberite jezik</label>
<select class="form-control" ng-model="test.vari">
<option>Hrvatski</option>
<option>Srpski</option>
<option>Bosanski</option>
<option>Engleski jezik</option>
<option>Njemački jezik</option>
</select>
</div>
<button type="submit" class="btn btn-default" ng-click="saveLanguage()">Spremi Jezik</button>
</form>
</tab>
</div>
app.controller("SettingsCtrl", ['$scope','SettingsFactory','$stateParams', function($scope,SettingsFactory,$stateParams){
$scope.navType = 'pills';
$scope.test= {};
$scope.saveLanguage = function()
{
console.log($scope.test.vari);
// SettingsFactory.update({ id:$stateParams.user_id }, $scope.language);
}
}]);
The tab creates child scopes so we need to bind it to an expression that evaluates to a model in the parent scope.
For this, the model must use a . like this:
ng-model='object.variable'
And we must declare the object in controller's top:
$scope.object = {};
Example:
angular.module('test', ['ui.bootstrap']);
var DemoCtrl = function ($scope) {
$scope.obj = {text: ''};
$scope.show = function() {
alert('You typed: ' + $scope.obj.text)
}
};
<!doctype html>
<html ng-app="test">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.14.0.js"></script>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div ng-controller="DemoCtrl">
Value outside the tabs: {{obj.text}}
<uib-tabset>
<uib-tab heading="Tab 1">
<input ng-model="obj.text">
<button ng-click="show()">Show</button>
</tab>
</tabset>
</div>
</body>
</html>
I've made a custom directive on top of ui bootstrap modal directive so I can use the same modal template everywhere in my app.
My directive works until I try to transclude its content into the template:
http://plnkr.co/edit/YPESA3?p=preview
From index.html
<div ng-controller="ModalDemoCtrl">
<button class="btn" ng-click="open()">Open me!</button>
<my:modal open="shouldBeOpen" close="close()">
<h1>Content</h1>
</my:modal>
</div>
Module code:
angular.module('plunker', ['ui.bootstrap'])
.controller('ModalDemoCtrl', function($scope) {
$scope.open = function () {
$scope.shouldBeOpen = true;
};
$scope.close = function () {
$scope.closeMsg = 'I was closed at: ' + new Date();
$scope.shouldBeOpen = false;
};
$scope.items = ['item1', 'item2'];
})
.directive('myModal', function() {
return {
restrict : 'E',
templateUrl: 'myTpl.html',
//transclude: true,
scope : {
open : '=',
close : '&'
}
};
});
Modal template:
<div modal="open">
<div class="modal-header">
<h4>I'm a modal!</h4>
</div>
<div class="modal-body">
<!--<div ng-transclude/>-->
</div>
<div class="modal-footer">
<button class="btn btn-warning cancel" ng-click="close()">Cancel</button>
</div>
</div>
Uncomment transclude property from the directive and the template and you'll see you get a TypeError: undefined is not a function.
I can't figure what I'm doing wrong.
OP, your snippet is exactly what I was looking to do—thanks!
I managed to get your plunk working by passing replace:true as well as transclude: true
Here's the updated plunk http://plnkr.co/edit/gxCS2V?p=preview
I'm new to Angular, so I was interested to know why:
replace - if set to true then the template will replace the current element, rather than append the template to the element.
(via the Angular docs)
Which, of course makes sense once you know.
Good to know if you want to make your directive especially recyclable. Modals are pretty perfect example.
Related : ui-bootstrap is worth checking out.
Check this solution, you dont need a extra controller or angular-ui for that only pass a simple handler and use it
example.js
angular.module('plunker', [], function() {
})
.directive('modal', function() {
return {
restrict : 'E',
templateUrl: 'myTpl.html',
transclude: true,
controller: function($scope) {
// you need get a better unique generator
$scope.modal_id = 'modal_' + Math.floor((Math.random()*100+1));
$scope.handler = $scope.modal_id;
},
scope : {
handler : '='
}
};
})
.run();
index.html
<!doctype html>
<html ng-app="plunker">
<head>
<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css" rel="stylesheet">
</head>
<body>
<div ng-init="handler = null">
<modal handler="handler">
<h1>Content</h1>
</modal>
Open me
</div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.5/angular.js"></script>
<script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/js/bootstrap.min.js"></script>
<script src="example.js"></script>
</body>
</html>
myTpl.html
<div id="{{modal_id}}" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="{{modal_id}}Label" aria-hidden="true">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 id="{{modal_id}}Label">I'm a modal!</h4>
</div>
<div class="modal-body">
<div ng-transclude></div>
</div>
<div class="modal-footer">
<button class="btn" data-dismiss="modal" aria-hidden="true">Cancel</button>
</div>
</div>
look how works in plunker