Q:

Set Angular UI Modal height and width programmatically

In this plunk I have an Angular UI modal that has a related class the-modal to set the height and the width, they are initially set at 300px and 500px respectively.
What I need is to set the height and the width programmatically when the modal is opened, say at 100px and 200px.
I cannot use ng-class as I want the user to be able to define the height and width. For example, newHeight and newWidth below will be taken from a database and used to set the modal dimensions. Any ideas how to make this work?
Javascript
var app = angular.module("app", ['ui.bootstrap']);
app.controller("ctl", function($scope,$uibModal) {

  /*
  * these values are taken from a database
  * and should be used to set the height and width of the modal
  */
  var newHeight = 100;
  var newWidth = 200;

  $scope.open = function () {
    var modalInstance = $uibModal.open({
          animation: false,
          windowClass: 'the-modal',
          templateUrl: 'myModalContent.html'
        });

    };

});

HTML
    <style>
      .the-modal .modal-content{
          width:500px;
          height:300px;
      }
   </style>

  </head>

  <body ng-app="app" ng-controller="ctl">

    <script type="text/ng-template" id="myModalContent.html">
        <p>Some content</p>
    </script>

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

   </body>

A:

Might not be the best solution, but I think it solves Your problem.
I created directive adjustModal with hardcoded height/width values, but You can pass them aswell. If you put this directive on first element in modal template, the parent element will be .modal-content so You can change width/height directly using jqLite.
modal template:
<script type="text/ng-template" id="myModalContent.html">
    <div adjust-modal>
      <p>Some content</p>
    </div>
</script>

directive:
app.directive('adjustModal', function() {
      return {
        link: function (scope, element) {
          var height = '100px';
          var width = '100px';
          element.parent().css("width", width)
          element.parent().css("height", height)
        }
      }
    });

working plunker

