Angularjs - Output DOM element from HTML code

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

app.directive('renderCanvas', function($compile){
  return {
     restrict: 'E',
     scope: {
        canvas: '='
     },
     link: function(scope, elem, attr){

         console.log('canvas', scope.canvas);

         scope.$watch('canvas', function(){

             elem.html(' ');
             var compiled = $compile(scope.canvas)(scope);

             elem.append(compiled);

         })

  
     }
  
  }
})

app.controller('globalCtrl', function($scope){
  $scope.imageToCanvas = function(image){
    var canvas = document.createElement("canvas");
    canvas.width = image.width;
    canvas.height = image.height;
    canvas.getContext("2d").drawImage(image, 0, 0);
		return canvas;
	};
  
  $scope.img = new Image();
  $scope.img.onload = function(){
    $scope.canvas = $scope.imageToCanvas(this);
    //angular.element('#canvasTarget').html($scope.canvas);
    $scope.$apply();
  };
  $scope.img.src = "https://www.w3schools.com/css/trolltunga.jpg";
});

canvas {
  max-width: 50%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-sanitize/1.6.4/angular-sanitize.min.js"></script>

<div ng-app="myApp">
  <div ng-controller="globalCtrl">
  
    <section>
      <h3>Obviously html() method from JS code works fine.</h3>
      <div id="canvasTarget"></div>
    </section>
    
     <hr />
    
    <section>
      <h3>But how to output an object directly from HTML code?</h3>
      
      <p>try #1</p>
      <div data-ng-if="canvas">
          <render-canvas canvas="canvas"></render-canvas>
      </div>
      
      <p>try #2</p>
      <div ng-bind-html="canvas"></div>
      
    </section>

  </div>
 </div>