How to load controller file dynamically when the model is opened

In web application there are a lot of modal template (angular foundation modal). When the modal is opened, we must give controller that are created in the page javascript file. but this controller are generally written inline. I want to get these controller as external or dynamically load.

It is like :

var modalInstance = $modal.open({ templateUrl: 'myModalContent.html', 
                                 controller: 'modal-controller.js' })

can it be done? if so, how can I do that this,

thank your helps

Would you try this?

angular.module('foundationDemoApp', ['mm.foundation']);
angular.module('foundationDemoApp').controller('ModalDemoCtrl', function ($scope, $modal, $log) {

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

  $scope.open = function () {

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

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

// Please note that $modalInstance represents a modal window (instance) dependency.
// It is not the same as the $modal service used above.

angular.module('foundationDemoApp').controller('ModalInstanceCtrl', function ($scope, $modalInstance, items) {

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

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

  $scope.cancel = function () {
    $modalInstance.dismiss('cancel');
  };
});
<!doctype html>
<html ng-app="foundationDemoApp">
  <head>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.3/angular.js"></script>
    <script src="//pineconellc.github.io/angular-foundation/mm-foundation-tpls-0.5.1.js"></script>
    <script src="example.js"></script>
    <link href="//cdnjs.cloudflare.com/ajax/libs/foundation/5.2.0/css/foundation.css" rel="stylesheet">
  </head>
  <body>

    <div class="row">
      <div class="small-12.columns">
<div ng-controller="ModalDemoCtrl">
  <script type="text/ng-template" id="myModalContent.html">
    <h3>I'm a modal!</h3>
    <ul>
      <li ng-repeat="item in items">
        <a ng-click="selected.item = item">{{ item }}</a>
      </li>
    </ul>
    <p>Selected: <b>{{ selected.item }}</b></p>
    <button class="button" ng-click="ok()">OK</button>
    <a class="close-reveal-modal" ng-click="cancel()">&#215;</a>
  </script>

  <button class="button" ng-click="open()">Open me!</button>
  <div ng-show="selected">Selection from a modal: {{ selected }}</div>
</div>
      </div>
    </div>