Parse html correctly into an attribute?

I've got a directive to create dynamic components. What I'm trying to do is pass my unit testing with this directive. But it's not working because of html parsing:

(function (angular) {
    angular.module('directives')
        .directive('compileHtml', function ($compile) {
            return {
                restrict: 'A',
                link: function (scope, elem, attrs) {
                    scope.$watch(function () {
                        return scope.$eval(attrs.compileHtml);
                    }, function (value) {
                        elem.html(value);
                        $compile(elem.contents())(scope);
                    });
                }
            };
        });
})(window.angular);

This is the unit testing:

  beforeEach(angular.mock.module('directives'));
  beforeEach(angular.mock.inject(function(_$rootScope_, _$compile_, $sce) {
      scope = _$rootScope_.$new();
      $compile = _$compile_;

      scope.pageTemplate = '<div><p></p></div>';
      var element = angular.element('<div compile-html="{{pageTemplate}}"></div>');
      $compile(element)(scope);
      scope.$digest();
  }))

This is the error I receive:

 [$parse:syntax] Syntax Error: Token '<' not a primary expression at column 1 of the expression [<div><p></p></div>] starting at [<div><p></p></div>].

Do I need to do something else to accept that HTML? Is something related to the $sce