Spock Spock - 1 year ago 148
AngularJS Question

How to use Angular-Strap to create a modal with a controller?

I'm struggling to find the right way to use an Angular-Strap modal/aside with a controller.

Yes, the calling code could inject the

, making it available to the modal. But there are issues with that.

myModal = $modal({
scope: $scope,
template: 'template.html',
show: false,
backdrop: "static",
keyboard: false,
persist: true


This will pollute the calling controller with potentially modal-only methods and properties.

I usually use "controllerAs", and therefore don't even have a
to inject into the modal in the first place!

You could create a new
and then insert methods into that, but again, that would require injection of
into the parent controller. Bad bad bad.

If I use
inside the modal template, I can have my controller. But his gives me another problem: now I cannot inject data into the modal controller, and there is no way my calling code can know when the modal is closed and returning data from the modal also becomes a chore (involves a factory just to keep the parent and child controller data synchronized).

I'm really struggling how to make this the best way.

Any ideas?



This is how I do it for now:

In my template I make a directive that opens up the modal.



So basically the directive calls my modal and when the modal closes or wants to return with a result, it calls the method specified in the directive parameter.

This is how the directive could look:

(function() {

'use strict';


function myModal(){

return {

restrict: 'E',

// The modal callback specified in the directive tag
scope: {
onUpdate: '&?'

replace: true,

// This is the template for the directive, not the modal
templateUrl: 'button.html',

controllerAs: 'ctrl',

bindToController: true,

compile: function (element, attrs) {

return function (scope, element, attrs) {


controller: function($scope, $log, $aside){

var self = this;

var myDialog = $aside({

// Dialog template
template: 'my-modal.template.html',
show: false,
animation: 'am-fade-and-slide-right',
placement: 'right',
backdrop: true,
html: true,
container: '',
scope: $scope

// Opens modal
self.ShowDialog = function(){
myDialog.$promise.then(function() {

// Expose Update() method to the dialog template
$scope.Update = function(){

if(angular.isFunction(self.onUpdate) ) {






Answer Source

Just use the 'controller' option:

$scope.showModal = function() {
    title: 'My Title', 
    content: 'My Content', 
    show: true,
    controller: 'ModalCtrl'

Here's a plnkr

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