UltraSonja UltraSonja - 2 years ago 96
AngularJS Question

AngularJS: External Modal Templates

I read Agularjs - include external html file into modals, but it didn't include much code or explanation and just pointed to docs that I've read. So, I will go into more detail.

I have a main html file for a SPA (Single Page Application). I want to use modals for more detailed views.

<meta charset='utf-8'>
<script src="js/angular.js"></script>
<script src="js/angular-ui-bootstrap-modal.js"></script>
<script src="js/app.js"></script>
<link rel="stylesheet" href="css/bootstrap.css">
<body ng-app="MyApp" ng-controller="MyCtrl">

<button class="btn" ng-click="open()">Open Modal</button>

<!-- want this to be in a separate html file -->

<div modal="showModal" close="cancel()">
<div class="modal-header">
<h4>Modal Dialog</h4>
<div class="modal-body">
<p>Example paragraph with some text.</p>
<div class="modal-footer">
<button class="btn btn-success" ng-click="ok()">Okay</button>
<button class="btn" ng-click="cancel()">Cancel</button>

<!-- -->


And my app.js file:

var app = angular.module("MyApp", ["ui.bootstrap.modal"]);

app.controller("MyCtrl", function($scope) {

$scope.open = function() {
$scope.showModal = true;

$scope.ok = function() {
$scope.showModal = false;

$scope.cancel = function() {
$scope.showModal = false;


What would I need to add to
in order for it to be able to display external html files as modals on my main html page?

Answer Source

I've done this plnkr so as to explain it better

To open the modal defined in a dedicated html template :

1. The following is declared in the controller responsible for the button opening the modal :

  templateUrl: 'myModalTemplate.html',
  controller: 'MyModalController'

2. This is in the controller of the modal :

$scope.ok = function () {

$scope.cancel = function () {

See also ui bootstrap doc

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download