angular bootstrap modal service not working

Question

I created a common modal service in my application. But it's not working somehow. Some small thing am missing on this plunker but am not able to figure out.

Based on passed parameter either it will open error-dialog or cancel-dialog.

Find PLUNKER here

Here is JS

    // create angular app
var validationApp = angular.module('validationApp', ['ui.bootstrap']);

// create angular controller
validationApp.controller('mainController', function($scope, ModalService) {

  var vm = this;
  // function to submit the form after all validation has occurred          
  vm.submitForm = function() {


    // check to make sure the form is completely valid
    if ($scope.userForm.$valid) {
      alert('our form is amazing');
    }

  };

  function openDialog() {
    alert('why am not showing');
    ModalService.openModal('Analysis Error', 'Complete Application Group configuration prior to running analysis.', 'Error');
  }

});
//controller fot dialog
validationApp.controller('ErrorDialogCtrl',
  function($uibModalInstance, message, title, callback) {
    alert('sfdsfds');
    var vm = this;
    vm.message = message;
    vm.onOk = onOk;
    vm.onContinue = onContinue;
    vm.onDiscard = onDiscard;
    vm.callback = callback;
    vm.title = title;

    function onOk() {
      $uibModalInstance.close();
    }

    function onContinue() {
      $uibModalInstance.close();
    }

    function onDiscard() {
      vm.callback();
      $uibModalInstance.close();
    }
  });
// common modal service
validationApp.service('ModalService',
  function($uibModal) {

    return {
      openModal: openModal
    };

    function openErrorModal(title, message, callback) {
      $uibModal.open({
        templateUrl: 'ErrorDialog.html',
        controller: 'ErrorDialogCtrl',
        controllerAs: 'vm',
        backdrop: 'static',
        size: 'md',
        resolve: {
          message: function() {
            return message;
          },
          title: function() {
            return title;
          },
          callback: function() {
            return callback;
          }
        }
      });
    }

    function openCancelModal(title, message, callback) {
      $uibModal.open({
        templateUrl: 'CancelDialog.html',
        controller: 'ErrorDialogCtrl',
        controllerAs: 'vm',
        backdrop: 'static',
        size: 'md',
        resolve: {
          message: function() {
            return message;
          },
          title: function() {
            return title;
          },
          callback: function() {
            return callback;
          }
        }
      });
    }

    function openModal(title, message, modalType, callback) {
      if (modalType === "Error") {
        openErrorModal(title, message, callback);
      } else {
        openCancelModal(title, message, callback);
      }
    }
  }
);

Opening Dialog in HTML

<div class="col-sm-6">
  <button type="submit" class="btn btn-primary" ng-click="openCancelDialog()">Open Cancel Dialog</button>
  <button type="submit" class="btn btn-primary" ng-click="openErrorDialog()">Open Error Dialog</button>
 </div>

Cancel Dialog HTML

<div>
    <div class="modal-header">
        <h3 class="modal-title">{{vm.title}}</h3>
    </div>
    <div class="modal-body">
        <p ng-bind-html="vm.message"></p>
    </div>
    <div class="modal-footer">
        <button class="btn btn-primary" ng-click="vm.onContinue()" id="continue">Continue</button>
        <button class="btn btn-primary" ng-click="vm.onDiscard()" id="discard">Discard</button>
    </div>
</div>

ErrorDiaog HTML

<div>
    <div class="modal-header">
        <h3 class="modal-title">{{vm.title}}</h3>
    </div>
    <div class="modal-body">
        <p ng-bind-html="vm.message"></p>
    </div>
    <div class="modal-footer">
        <button class="btn btn-primary" ng-click="vm.onOk()">ok</button>
    </div>
</div>

Answer 1

wrong in your js file, you need to declare function like below. you just copy these code and put it in your file then it will work fine.

NOTE: not ModalService.showModal, it should be ModalService.openModal check your code here

$scope.openCancelDialog = function() {
alert('why am not showing CAncel');
ModalService.openModal('Analysis Error', 'I am Error Type', 'Error');

}


$scope.openErrorDialog = function() {
console.log('why am not showing Error');
ModalService.openModal('Analysis Error', 'I am cancel Type', 'Cancel');
}

Answer 2

i've created a new PLNKR here: https://plnkr.co/edit/3RBJneSt7RCClrJ5Hba2?p=preview

$scope.submitForm = function() {    
      //check to make sure the form is completely valid
       if ($scope.userForm.$valid) {
         alert('our form is amazing');
       }

}; 
$scope.openCancelDialog = function(){
   //alert('why am not showing CAncel');
   ModalService.openModal('Analysis Error', 'I am Error Type', 'Error');
 }


 $scope.openErrorDialog = function(){
    //alert('why am not showing Error');
    ModalService.openModal('Analysis Error', 'I am cancel Type', 'Cancel');
 }