title: Set Angular UI Modal height and width programmatically
body: <p><a href="http://plnkr.co/edit/swUY4bprWw2HDILMInn3?p=preview" rel="nofollow noreferrer">In this plunk</a> I have an Angular UI modal that has a related class <code>the-modal</code> to set the height and the width, they are initially set at <code>300px</code> and <code>500px</code> respectively.</p>
  
  <p>What I need is to set the height and the width programmatically when the modal is opened, say at <code>100px</code> and <code>200px</code>.</p>
  
  <p>I cannot use <code>ng-class</code> as I want the user to be able to define the height and width. For example, <code>newHeight</code> and <code>newWidth</code> below will be taken from a database and used to set the modal dimensions. Any ideas how to make this work?</p>
  
  <p>Javascript</p>
  
  <pre><code>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'
          });
  
      };
  
  });
  </code></pre>
  
  <p>HTML</p>
  
  <pre><code>    &lt;style&gt;
        .the-modal .modal-content{
            width:500px;
            height:300px;
        }
     &lt;/style&gt;
  
  
    &lt;/head&gt;
  
    &lt;body ng-app="app" ng-controller="ctl"&gt;
  
      &lt;script type="text/ng-template" id="myModalContent.html"&gt;
          &lt;p&gt;Some content&lt;/p&gt;
      &lt;/script&gt;
  
      &lt;button type="button" class="btn btn-default" ng-click="open()"&gt;Open me!&lt;/button&gt;
  
     &lt;/body&gt;
  </code></pre>