Angularjs - Angular UI $modal and $modalInstance within one controller

Question

I would like to ask, I understand that AngularUI's modal consist of 2 controllers 1 is the default controller that I use to process data and the other one is to handle $modelInstances, which is fine for me. But what I wanted to do is I have several scopes that I will be using while rendering/editing data in my modal display. Instead of resolving all these scope between controllers what i tried to do is to merge both controllers together so the scopes can be shared among the webpages. (Noted that its a realtime scope) What I did is like below

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

  $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',
      controller: 'ModelCtrl',
      size: 'lg',
      resolve: {
        items: function () {
          return $scope.items;
        }
      }
    });

    modalInstance.result.then(function () {

    }, function () {

    });
  };

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

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

I've combined both controller into one, and inject the relevant modules back so it would work, theoretically. But instead what I've got is an error saying [$injector:unpr] Unknown provider: $modalInstanceProvider <- $modalInstance <- ModelCtrl. Understand from this error which mean I have injected an unknown provider $modalInstanceProvider so I've tried to remove the $modalInstance from the modules, the Modal managed to open but the the action for close and dismiss throws me an error of $modalInstance is not defined. What have i done wrong and how should i combine both controllers instead of separating them into 2?

here is the plunkr link so you can understand what i mean. thank you.

Answer 1

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

angular.module('app').controller('ModelCtrl', function ($scope, $modal) {

see that i didn't inject $modalInstance

then modal creation be like:

var modalInstance = $modal.open({
  animation: true,
  templateUrl: 'myModalContent.html',
  size: 'lg',
  scope: $scope, //i make modal scope the same as  ModelCtrl scope
});

then you use modalInstance that you created to manipulate the modal

so final code is

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');
  };
});