Get Absolute Positioned Element Height, After `ng-style` Is Applied

When getting the height of a element in an AngularJS directive I am seeing the value as if it were to appear inside the confines of the relative parent. How can I get the height of the element based on the true width of display element?

I have the following HTML, which places my directive's template into a div with a width: 200px:

<div style="width:200px">
  <inline-input-popover value="foo" width="350">
    <p>Type string to insert into target. Here's some extra text to add length to the paragraph.</p> 
  </inline-input-popover>
</div>

This is done to show static elements within the directive within that width, but there is also a dynamic popover which I can give a different width to. This is my directive's template:

<div class="inline-input-popover">
  <input class="placeholder-input" type="text" ng-model="value" ng-focus="hasFocus=!hasFocus" />

  <div class="inline-popover" outside-click="closePopover()" ng-click="keepFocus()" ng-show="hasFocus" ng-style="{width:{{width}}+'px'}">
    <div class="inline-header" ng-transclude></div>
    <input class="inline-input" type="text" ng-model="value" />
    <button ng-click="closePopover()">Done</button>
  </div>
</div>

I have an ng-style being applied to the absolute positioned popover, resizing the element based on the variable passed in on the directive.

But when I check the height of the inline-header element in the link section of my directive:

var inlineInput = elem[0].getElementsByClassName('inline-input')[0];
console.log(inlineHeader.height());

... I get the height of the element as before the ng-style is applied to it.

Is it possible to determine the proper element height, based on styles applied with an ng-style?

Surrounding it in a $timeout block works.

You would have to do this for example:

$timeout(function {
    var inlineInput = elem[0].getElementsByClassName('inline-input')[0];
    console.log(inlineHeader.height());
},0)

I made a fiddle here for you to see:

http://jsfiddle.net/Ar14/xdym024t/

As for the reasoning behind it I'm pretty sure it makes the code inside the block run after the $digest cycle that evaluates ng-style has run its course.

Alternate Solution

Pass the element from the link to a controller. The controller then contains a function that you can call whenever you need to use the height of the element.

.directive('foo', function() {
    ...//other attributes and stuff
    controller: 'fooController',
    link: function (scope,elem,attrs) {
        //stuff
        scope.foo = elem;
    }    
})
.controller('fooController', function () {
    $scope.getHeight = function () {
        var inlineInput = $scope.foo[0].getElementsByClassName('inline-input')[0];
        console.log(inlineHeader.height());
    }
})