title: Calling another controller within AngularJS UI Bootstrap Modal
body: <p>I have a completely working version of the ui.bootstrap.modal as per the example here <a href="http://angular-ui.github.io/bootstrap/#/modal" rel="nofollow">http://angular-ui.github.io/bootstrap/#/modal</a> but I want to take a stage further and add it to my controller configuration.</p>
  
  <p>Perhaps I'm taking it too far (or doing it wrong) but I'm not a fan of just</p>
  
  <pre><code>var ModalInstanceCtrl = function ($scope...
  </code></pre>
  
  <p>My modal open controller:</p>
  
  <pre><code>var controllers = angular.module('myapp.controllers', []);
  
  
  controllers.controller('ModalDemoCtrl', ['$scope', '$modal', '$log',
      function($scope,  $modal, $log) {
  
          $scope.client = {};
  
          $scope.open = function(size) {
              var modalInstance = $modal.open({
                  templateUrl: 'templates/modals/create.html',
                  controller: ModalInstanceCtrl,
                  backdrop: 'static',
                  size: size,
                  resolve: {
                      client: function () {
                          return $scope.client;
                      }
                  }
              });
  
              modalInstance.result.then(function (selectedItem) {
                  $log.info('Save changes at: ' + new Date());
              }, function () {
                  $log.info('Closed at: ' + new Date());
              });
          };
      }
  ]);
  </code></pre>
  
  <p>Modal instance controller:</p>
  
  <pre><code>var ModalInstanceCtrl = function ($scope, $modalInstance, client) {
  
      $scope.client = client;
  
      $scope.save = function () {
          $modalInstance.close(client);
      };
  
      $scope.cancel = function () {
          $modalInstance.dismiss('cancel');
      };
  };
  </code></pre>
  
  <p>However I would like to change this last controller to:</p>
  
  <pre><code>controllers.controller('ModalInstanceCtrl', ['$scope', '$modalInstance', 'client',
      function ($scope, $modalInstance, client) {
  
          $scope.client = client;
  
  
          $scope.save = function () {
              $modalInstance.close(client);
          };
  
          $scope.cancel = function () {
              $modalInstance.dismiss('cancel');
          };
      }
  ]);
  </code></pre>
  
  <p>If I also update the controller reference within $scope.open for ModalDemoCtrl controller to</p>
  
  <pre><code>controller: controllers.ModalInstanceCtrl
  </code></pre>
  
  <p>then there are no errors but the save and cancel buttons within the modal window no longer work.</p>
  
  <p>Could someone point out where I am going wrong - possibly a fundamental lack of understanding of the way controllers work within the AngularJS?!</p>