(function(kopf, JSONTree) {
  "use strict";
  kopf.directive('kopfJsonTree',function() {
    var directive = {
      restrict: 'E',
      template:'<div class="json-tree"></div>',
      link: function(scope, element, attrs, requires){
        var scopeAttr = attrs.kopfBind;
        if(scopeAttr) {
          scope.$watch(scopeAttr, function(value) {
            if (value) {
              try {
                value = JSONTree.create(value);
              } catch (invalidJsonError) {
                value = invalidJsonError;
              }
            } else {
              value = '';
            }
            element.html(value);
          });
        }
      }
    };
    return directive;
  });
})(kopf, JSONTree);

(function(kopf, JSONTree) {
  "use strict";
  kopf.directive('kopfJsonTree',function($sce) {
    var directive = {
      restrict: 'E',
      template:'<div class="json-tree" ng-bind-html="result"></div>',
      scope: {
        kopfBind: '='
      },
      link: function(scope, element, attrs, requires){
          scope.$watch('kopfBind', function(value) {
            var result;
            if (value) {
              try {
                result = JSONTree.create(value);
              } catch (invalidJsonError) {
                result = invalidJsonError;
              }
            } else {
              result = '';
            }

            scope.result = $sce.trustAsHtml(result);
          });
      }
    };
    return directive;
  });
})(kopf, JSONTree);

Improve JSON Tree directive code