AngularStrap Modal is empty

Question

Plunker

I have an ng-grid that displays a list of properties. I have a delete button for each row. When I click delete I want a modal that says are you sure. Currently you can see the modal try to display, as the grayish transparent div fades into the page, however the contents of the modal are not displayed anywhere.

Above is a plunker. I was debugging this in chrome and noticed there is a display:none css attribute that when removed the modal is visible. I can update this manually but shouldn't angular-strap do this automagically when the modal.show() is called?

Answer 1

I updated your plunker here: Plunker

I was partially how you were loading Bootstrap UI.

This is all you need to do for loading:

var app = angular.module('myApp', ['ngGrid', 'ui.bootstrap']);

This you were using template instead of templateUrl here:

    $scope.opts = {
        templateUrl: 'modal.html',
        controller: ModalInstanceCtrl,
        backdrop: true,
    };

Then I had to add a contoller so the modals buttons would function correctly.

var ModalInstanceCtrl = function ($scope, $modalInstance) {
  $scope.ok = function () {
    $modalInstance.close();
  };

  $scope.cancel = function () {
    $modalInstance.dismiss('cancel');
  };
};