TrustAsHtml sandbox

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

app.controller('MainCtrl', ['$sce',
  function(sce) {
    var self = this;
    self.name = 'World';
    self.htmls = {
      rawHtml: '<p>I am an <code>HTML</code>string with <a href="http://google.com">links!</a> and other <em>stuff</em></p>',
      trustedHtml: ""
    };
    self.htmls.trustedHtml = sce.trustAsHtml(self.htmls.rawHtml);
  
  self.handleMouseMove = function(ev) {
    var mo = self.mouseObj;
    switch (ev.type) {
      case 'mousemove':
        break;
      case 'mousedown':
        break;
      case 'mouseup':
        break;
      case 'wheel':
        ev.preventDefault();
        break;
    }
  };
  }
]);

app.directive('trustdirec', [

  function() {
    return {
      restrict: 'AE',
      scope: {
        htmlObj: '='
      },
      templateUrl: 'trust.html',
      link: function(scope, element, attr) {
        scope.getHtml = function() {
          return scope.htmlObj.trustedHtml;
        };
      }
    };
  }
]);

<!DOCTYPE html>
<html ng-app="plunker">

<head>
  <meta charset="utf-8" />
  <title>TrustAsHtml example</title>
  <script>
    document.write('<base href="' + document.location + '" />');
  </script>
  <link rel="stylesheet" href="style.css" />
  <script data-require="angular.js@1.3.x" src="https://code.angularjs.org/1.3.6/angular.js" data-semver="1.3.6"></script>
  <script src="https://code.angularjs.org/1.3.6/angular-sanitize.min.js"></script>
  <script src="app.js"></script>
</head>

<body ng-controller="MainCtrl as mc">
  <div ng-mousedown="mc.handleMouseMove($event)">
    <p>Outside directive</p>

    <div ng-bind-html="mc.htmls.trustedHtml"></div>
    <trustdirec html-obj="mc.htmls"></trustdirec>
  </div>
</body>

</html>

/* Put your css in here */

    .floatingPanelStyle {
        position: absolute;
        background-color: #808080;
        border: solid #ffff00 2px;
        color: #ffffff;
        left: -10px;
        top: -10px;
        height: 20px;
        width: 20px;
        opacity: 1.0;
        text-align: center;
        overflow: hidden;
        transition: all 1s;
    }

    .floatingPanelStyle.red {
        background-color: red;
        width: 100px;
        height: 100px;
        left: -50px;
        top: -50px;
    }


<p>Inside Directive</p>
<div ng-bind-html = "getHtml()"></div>