Fail to Inject Controller for partial view in AngularJS

Question

I want to create pop up modal, for which my controller has to depend on another controller.

Below is my main controller file called product.js to define the modal instance. I am using help of angular-UI

    var myStoreControllers=angular.module("myStoreController",['ui.bootstrap','myStoreModalController']);

    myStoreControllers.controller('myStoreProductCtrl',function($scope,$modal,$log,ModalInstanceCtrl){

     $scope.message="Checking routing 123";


     $scope.items = ['item1', 'item2', 'item3'];

      $scope.open = function (size) {

        var modalInstance = $modal.open({
          templateUrl: 'assets/app/views/myModalContent.html',
          controller: ModalInstanceCtrl,
          size: size,
          resolve: {
            items: function () {
              return $scope.items;
            }
          }
        });

        modalInstance.result.then(function (selectedItem) {
          $scope.selected = selectedItem;
        }, function () {
          $log.info('Modal dismissed at: ' + new Date());
        });
      };


    });


Below is my controller definition for the view.

var myStoreModalController=angular.module("myStoreModalController",[]);

myStoreModalController.controller('ModalInstanceCtrl',function($scope, $modalInstance, items){

  $scope.items = items;
  $scope.selected = {
    item: $scope.items[2]
  };

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

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

});

This keeps giving me error:

Error: [$injector:unpr] Unknown provider: ModalInstanceCtrlProvider <- ModalInstanceCtrl

I can't get hold why this dependency injection is failing.

Answer 1

I did changes as per Cory Suggested , and it worked fine.

Refined code is as below:

 var myStoreControllers=angular.module("myStoreController",['ui.bootstrap','myStoreModalController']);

    myStoreControllers.controller('myStoreProductCtrl',function($scope,$modal,$log,ModalInstanceCtrl){

     $scope.message="Checking routing 123";


     $scope.items = ['item1', 'item2', 'item3'];

      $scope.open = function (size) {

        var modalInstance = $modal.open({
          templateUrl: 'assets/app/views/myModalContent.html',
          controller: 'ModalInstanceCtrl',
          size: size,
          resolve: {
            items: function () {
              return $scope.items;
            }
          }
        });

        modalInstance.result.then(function (selectedItem) {
          $scope.selected = selectedItem;
        }, function () {
          $log.info('Modal dismissed at: ' + new Date());
        });
      };


    });


Below is my controller definition for the view.

var myStoreModalController=angular.module("myStoreModalController",[]);

myStoreModalController.controller('ModalInstanceCtrl',function($scope, $modalInstance, items){

  $scope.items = items;
  $scope.selected = {
    item: $scope.items[2]
  };

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

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

});