How to parse well html into a directive compilation?

I created a directive to make dynamic components. I'm trying to do unit testing to this directive but unfortunately, I'm doing a bad parse of the HTML

(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();

      //$sce.trustAsHtml('<div></div>')
  }));

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?