AngularJS中使用$ compile的潜在开销

Question

在我的应用中，用户触发AngularJS从DB加载包含Angular代码的HTML。 加载后，Angular应该编译并将内容插入div。 我使用了SO答案来解决它https://stackoverflow.com/a/18157958/1392510。 但它必须使用此标记加载看似 big 的页面部分（超过10-15 KB）：

<div dynamic="markUp" ng-model="markUp"></div>

这是dynamic指令：

app.directive('dynamic', function ($compile) {
    return {
        restrict: 'A',
        replace: true,
        link: function (scope, ele, attrs) {
            scope.$watch(attrs.dynamic, function(markUp) {
                ele.html(markUp);
                $compile(ele.contents())(scope);
            });
        }
    };
});

似乎我在某处做错了，因为插入后dynamic div内容会复制模型内容。 这样做是否有更惯用的方式？