Better use of $compile and $sce to render html contents | AngularJs

Angular template handlers

// for html strings that contain expressiona or other angular directives
app.directive('template', ['$compile', function($compile) {
    return function(scope, element, attrs) {
        attrs.$observe("template", function(_newVal) {
            scope.$applyAsync(function() {
                element.replaceWith($compile(_newVal)(scope));
            });
        });
    };
}]);
--------------
$scope.html = "<button ng-click="click()">MeTe-30</button>"
<div template="{{html}}"></div>


// for pure html strings
app.filter('sce', ['$sce', function ($sce) {
    return $sce.trustAsHtml;
}]);
--------------
$scope.html = "<h1>MeTe-30</h1>"
<div ng-bind-html="html | sce"></div>