in my chat application in angular6 wherein user types/creates a new message to the existing it gets appended to the existing messages

define(function (require, exports, module) {
    'use strict';

    var base = require('base');
    var utils = base.utils;

    configCompile.$inject = ['$compileProvider'];
    module.exports = configCompile;

    function configCompile($compileProvider) {

        $compileProvider.directive('myCompile', myCompile);

        function myCompile($compile) {
            // directive factory creates a link function
            return {
                scope: {
                    compile: "=",
                    scope: "=?",
                },
                link: link,
            }

            function link(scope, element, attrs) {
                var scope_child = scope.$new();

                scope.$watch('compile', function () {
                        // element.html(scope.compile);
                        element.empty().append(scope.compile);
                        $compile(element.contents())(scope_child);
                    }
                );

                scope.$watch('scope', function () {
                        scope.scope = scope.scope || {};
                        scope_child = scope.$new();
                        for (var idx in scope.scope) {
                            scope_child[idx] = scope.scope[idx];
                        }
                        scope_child.$this = scope.scope;
                        // element.html(scope.compile);
                        element.empty().append(scope.compile);
                        $compile(element.contents())(scope_child);
                    }
                );

            };
        };
    }

})

Select allOpen in new window