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

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.

2 Answers

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

I checked above answer, but modalInstance close was not working. So changed code like below, its working now.

$scope.open = function() { $scope.$modalInstance = $modal.open({ scope: $scope, templateUrl: "modalContent.html", size: '', } }; $scope.ok = function() { $scope.$modalInstance.close(); }; $scope.cancel = function() { $scope.$modalInstance.dismiss('cancel'); };