Determining Angular UI modal height programmatically

Question

In this plunk I have an Angular UI modal with an alert popup that should display the modal height. Instead, it shows an empty variable. Where's the error?

HTML

 <div the-modal></div>

Javascript

var app = angular.module("app", ['ui.bootstrap']);

app.controller("ctl", function($scope, $compile) {});


app.directive("theModal", function($uibModal, $timeout) {
  return {
    restrict: "AE",
    scope: true,
    link: function(scope, element, attrs, ctrl, transclude) {

        scope.instance = $uibModal.open({
          animation: false,
          scope: scope,
          template: 'Some Text',
          appendTo: element
        });

        $timeout(function(){
          alert("Modal height is: " + element.css("height"));
        },500);

    }
  }
});

Answer 1

The content has been placed inside div with modal-dialog class inside directive modal placeholder element. So ideally you should be looking at element's inner modal-content class.

element[0].querySelector('.modal-dialog').offsetHeight