AngularJS UI-Bootstrap Modal

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 (http://angular-ui.github.io/bootstrap/#/modal) directives website it seems to work.

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.

Package versions: Bootstrap 3.1.1, AngularJS 1.2.18, UI Bootstrap 0.11.0

I think the issue is here where I include the controller maybe I am not doing it correctly

controller: this.ModalInstanceCtrl,

Main App app.js:

'use strict'

angular.module('myApp', ['ui.bootstrap', myAppControllers]);

Controllers controllers.js:

'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();
    };
}]);