Setting Height with Angular Directive

Using Angular (and Ionic) I have a simple directive where I am trying to set the height of an inner element to match the height of its parent.

.directive('matchHeight', function() {
  return {
    restrict: 'A',
    link: function($scope,elem,attrs) {
      var parentHeight = elem.parent()[0].offsetHeight;
      elem.css('height', parentHeight + 'px');
    }
  };
});

The height that it is picking up is not the actual height of the parent though... If I inspect the height in the DOM or log the parent object and look at offsetHeight there, its different than the height that is being set. I suspect this has something to do with the timing of when the directive is being applied, which is something that totally eludes me... Anyone have any tips on this?

Here is a codepen.