Angular Modal is not working properly

Question

I am using Angular bootsrap modal service. version of ui-bootstrap is angular-ui-bootstrap 1.3.3. below is my code.

First on module , I have registered correctly.

var angularFormsApp = angular.module("angularFormsApp", ["ngRoute", "ui.bootstrap"]);

then on angular controller , I have injected this directive correctly.

var loginController = function ($scope, $window, $routeParams, $uibModal, DataService)

then I am calling this modal by following code inside same controller

var onError = function (reason) {
            $scope.modalOptions.headerText = "Error";
            $scope.modalOptions.bodyText = reason.statusText;

            $uibModal.open({
                templateUrl: baseurl + 'app/ErrorMessages/PopUpErrorMessage.html',
                controller: 'loginController'
            });
        };

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

Now as you can see I have created separate html file for modal and below is html

<div class="modal-header">
  <h3>{{modalOptions.headerText}}</h3>
</div>
<div class="modal-body">
  <p>{{modalOptions.bodyText}}</p>
</div>
<div class="modal-footer">
 <input type="button" class="btn btn-default" value="Close"
            ng-click="cancelForm()" />
</div>

Now till here everything is working , I mean on error method , modal is showing but problem is its showing blank , even nothing happening on close button click.

There is no error in console of chrome browser. Here is screen shot.

Answer 1

Your Modal does not know about your controller's scope. Try changing to this:

    $uibModal.open({
        templateUrl: baseurl + 'app/ErrorMessages/PopUpErrorMessage.html',
        scope: $scope
    });