title: AngularJS UI-Bootstrap Modal
body: <p>Below is my angular code I am not getting any errors, the model opens up but the ModalInstanceCtrl functions cancel() and ok() do not want to work, however If I right out the controller exactly like they have it on angularjs ui-bootstrap (<a href="http://angular-ui.github.io/bootstrap/#/modal" rel="nofollow">http://angular-ui.github.io/bootstrap/#/modal</a>) directives website it seems to work. </p>
  
  <p>I am using the same HTML as in the example on the website except I have extracted the inline template to its own file, which is working.</p>
  
  <p>Package versions:
  Bootstrap 3.1.1, AngularJS 1.2.18, UI Bootstrap 0.11.0</p>
  
  <p>I think the issue is here where I include the controller maybe I am not doing it correctly</p>
  
  <pre><code>controller: this.ModalInstanceCtrl,
  </code></pre>
  
  <p>Main App app.js:</p>
  
  <pre><code>'use strict'
  
  angular.module('myApp', ['ui.bootstrap', myAppControllers]);
  </code></pre>
  
  <p>Controllers controllers.js:</p>
  
  <pre><code>'use strict';
  
  var myApp = angular.module('myAppControllers', []);
  
  myApp.controller('ModalCtrl', ['$scope', '$modal', '$log', function($scope, $modal, $log) {
  
  
      $scope.open = function (size) {
  
          var modalInstance = $modal.open({
              templateUrl: 'templates/myModalContent.html',
              controller: this.ModalInstanceCtrl,
              size: size,
  
             }
          });
  
          modalInstance.result.then(function (selectedItem) {
              $scope.selected = selectedItem;
          }, function () {
          $log.info('Modal dismissed at: ' + new Date());
        });
      };
  }]);
  
  myApp.controller('ModalInstanceCtrl', ['$scope', '$modalInstance', function($scope, $modalInstance) {
  
      $scope.ok = function () {
          $modalInstance.close();
      };
  
      $scope.cancel = function () {
          $modalInstance.dismiss();
      };
  }]);
  </code></pre>