Better way to set css height of iframe after content is loaded using angular

I have an angular directive that renders some HTML content in an iframe and when rendered sets the CSS height property to the height of the rendered html. This code ‘works’ but uses a Timeout function that I’d like to get away from.

Also, I have tried several other approaches, creating separate directives 1 for loading and 2 for sizing (this post How to set the iframe content height in my case? was quite helpful) but I couldn’t make that work as desired.

Any suggestions on how to improve this?

Here’s my code:

angular.module("simpleAppDirectives").directive("preview", function ($timeout) {
function link(scope, element) {
    var iframe = angular.element('<iframe frameborder="0" scrolling="no" style="width:100%; border: 2px dashed grey;" ></iframe>');
    scope.$watch('content', function () { //watch the content for changes...
        if (scope.content) {
            //when content changes occurr update the iframe preview window
            $(iframe).contents().find('body').html(scope.content.toString()); //updates the 'body'
            //when content is rendered, update the css height property of the <iframe> element
            $timeout(function () {
                var iFrameHeight = ($(iframe).contents().find('body')[0].scrollHeight + 20);
                $(iframe).css('height', iFrameHeight + "px");
            }, 1200);


return {
    link: link,
    restrict: 'E',
    scope: {
        content: '='


And usage:

<preview content=”previewHTML” updateIframeOnLoad style=”width:100%;” ></preview>

Thanks in advance for any ideas!