Angularjs – Center Angular modal ui

I am playing with angular modal ui dialog. I wonder what is the way to center it ? I find a similar question:
Twitter Bootstrap – Center Modal Dialog

but was unable to make it work as I am rather new to angular. Here is a simplified version of the plunker for modal dialog from the angular ui components page:

http://plnkr.co/edit/M35rpChHYThHLk17g9zU?p=preview

<script type="text/ng-template" id="myModalContent.html">
        <div class="modal-header">
            <h3>I'm a modal!</h3>
        </div>
        <div class="modal-body">
            test
        </div>
        <div class="modal-footer">
            <button class="btn btn-primary" ng-click="ok()">OK</button>
            <button class="btn btn-warning" ng-click="cancel()">Cancel</button>
        </div>
    </script>

    <button class="btn btn-default" ng-click="open()">Open me!</button>

js:

angular.module('plunker', ['ui.bootstrap']);
var ModalDemoCtrl = function ($scope, $modal) {

  $scope.open = function () {

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

  };
};


var ModalInstanceCtrl = function ($scope, $modalInstance) {

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

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

My idea is to take the dimensions of the page dynamically when the modal is open and resize and center it, but I am not sure how can I do that as I am rather new to angularjs. Any help with working example will be greatly appreciated.