title: Angular.js: Change Iframe height on load & change content
body: <p>I got an angular app that is dynamically loading a another page into a given iframe. This iframe's scope is then changed based on input's of the parent page.</p>
  
  <p>I have angular code to load the initial html into the iframe and a piece of plain javascript code to change the iframe size on window change.</p>
  
  <p>How can I achieve:</p>
  
  <p><strong>On initial load of the iframe as well as on each change of the content, I would like to adjust the iframe height to the content (so that basically no scrollbars are visible and content seems to be part of the page).</strong></p>
  
  <p>My code pieces:</p>
  
  <p>HTML with iframe:</p>
  
  <pre><code>&lt;div ng-app="cvForm" ng-controller="cvFormController"&gt;
      &lt;iframe cvframe="" id="cv-output-frame" style="width: 100%; height: 1000px; border: none"&gt;&lt;/iframe&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Loading content into iframe</p>
  
  <pre><code>/**
   * Load CV template
   */
  cvFormApp.directive('cvframe', function($compile, $http, appConfig) {
      return function($scope, $element, tpl) {
        $http({
          url: appConfig.baseUrl + 'res/templates/mf_classic.html',
          method: 'GET'
        }).then(function(response) {
          var $body = angular.element($element[0].contentDocument.body), 
                      template = response.data;
          $body.append($compile(template)($scope)); //appended compiled element to DOM
        });
      };
  });
  </code></pre>
  
  <p>Code to adjust height on window change:</p>
  
  <pre><code>function resizeIframe() {
      var oIFrame = document.getElementById('cv-output-frame');
  
      oIFrame.style.height = oIFrame.contentWindow.document.body.scrollHeight + 'px';   
      console.log('cv pane iframe resized to: ' + oIFrame.style.height);
  }
  
  document.getElementById('cv-output-frame').onload = resizeIframe; 
  window.onresize = resizeIframe;
  
  resizeIframe();
  </code></pre>
  
  <p>I have played around with directives and watch-statements, but I am still beginner and do not know how to start. My pseudo routine would be something like:</p>
  
  <ol>
  <li>Load content into iframe</li>
  <li>Attach watch-directive to iframe</li>
  <li>Change on initial load complete the height</li>
  <li>On every scope change adjust height to reflect new content (in many cases height will not be affected, as the scope changes are minimal)</li>
  </ol>
  
  <p>Thanks for any hints and pointing in the right direction!</p>