title: Angularjs - Angular UI $modal and $modalInstance within one controller
body: <p>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 </p>
  
  <pre><code>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');
    };
  });
  </code></pre>
  
  <p>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 <code>[$injector:unpr] Unknown provider: $modalInstanceProvider &lt;- $modalInstance &lt;- ModelCtrl</code>. Understand from this error which mean I have injected an unknown provider <code>$modalInstanceProvider</code> so I've tried to remove the $modalInstance from the modules, the Modal managed to open but the the action for <code>close</code> and <code>dismiss</code> throws me an error of <code>$modalInstance is not defined</code>. What have i done wrong and how should i combine both controllers instead of separating them into 2? </p>
  
  <p>here is the <a href="http://plnkr.co/edit/7jpKT99UksJ7dbHhgpDp" rel="noreferrer">plunkr</a> link so you can understand what i mean. thank you.</p>