Append html content to an iframe in Angular JS

Question

I am trying to create a preview of a full fledged html document, meaning this html content is itself a complete html document with ,

Answer 1

The updated solution based on Chris's solution for people having issues with Firefox browser:

var app = angular.module('App',[]);

app.controller("Cont", function($scope){
  $scope.content = "Hi there!";
});

app.directive("preview", function () {
  function link(scope, element) {
    var iframe = document.createElement('iframe');
    var element0 = element[0];
    element0.appendChild(iframe);

    scope.$watch('content', function () {
      iframe.contentWindow.document.open('text/htmlreplace');
      iframe.contentWindow.document.write(scope.content);
      iframe.contentWindow.document.close();
    });
  }

  return {
    link: link,
    restrict: 'E',
    scope: {
      content: '='
    }
  };
});