Angularjs – Angular UI $modal and $modalInstance within One Controller

AngularUI’s modal consist of 2 controllers the default controller $modal is a service to quickly create AngularJS-powered modal windows and the other one is to handle $modelInstances.

Here’s a simple example to illustrate $modal and $modalInstance within one controller in AngularJS:

1. You don’t have to create a new controller for created modal just do this:

angular.module('app', ['ngAnimate', 'ui.bootstrap']);
angular.module('app').controller('ModelCtrl', function ($scope, $modal) {

  $scope.items = ['item1', 'item2', 'item3'];
  //I have a few more scopes to be used in the model

  $scope.open = function (size) {

    var modalInstance = $modal.open({
      animation: true,
      templateUrl: 'myModalContent.html',
      size: 'lg',
      scope: $scope
    });

    modalInstance.result.then(function () {

    }, function () {

    });
  };

  $scope.ok = function () {
    modalInstance.close($scope.selected.item);
  };

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

2. In that way all the logic is in the same controller and you don’t have to create a separate controller for each modal window.

(function(){
    var app = angular.module('ngModalDemo', ['ui.bootstrap']) 
    .controller('formController', function($scope, $modal){
        $scope.openModal = function () {                        
            var modalInstance = $modal.open({
                templateUrl: 'SomeModal.html',
                controller: [
                    '$scope', '$modalInstance', 'data', function($scope, $modalInstance, data) {
                        $scope.data = data;
                        $scope.ok = function() {
                            $modalInstance.close();
                        };
                        $scope.closeModal = function() {
                            $modalInstance.dismiss();
                        };
                    }
                ]
            });
        };
    })
})();