AngularJS directive replaces html at breakpoint, won't reset to original element

Question

I created an Angular directive to allow me to specify a bootstrap breakpoint and new html to switch to at that breakpoint. I use a resize function to check whether or not to switch out the text any time the window is resized. The directive works when I'm starting with the original html, and resizing to the breakpoint. Once the html has been swapped, if I resize in the other direction, I can't get the html to switch back to the original element html.

Directive:

;(function(ng, undefined){
    'use strict';

    ng.module('common.directives')
        .directive('textSwap', textSwap);

    textSwap.$inject = ['$window', '$compile'];

    function textSwap($window, $compile) {

        return {
            restrict: "E",
            scope: {
                breakpoint: '=',
                newHtml: '='
            },
            transclue: true,

            link: function(scope, element, attrs, fn) {

                var originalElement = element;

                var keys = {
                    xs: 480,
                    sm: 768,
                    md: 992,
                    lg: 1200
                };

                checkAndReplaceContent();

                function checkAndReplaceContent() {
                    if ($window.innerWidth < keys[scope.breakpoint]) {
                        element.replaceWith($compile(scope.newHtml)(scope));
                    } else {
                        element.replaceWith(originalElement.context.innerHTML);
                    }
                }

                ng.element($window).on('resize', function() {
                    checkAndReplaceContent();
                });

            }
        };
    }
})(angular);

HTML:

<button class="btn btn-info grid-option-button pull-right"
    id="rxsignal-filter-button"
    popover-append-to-body="true" popover-trigger="mouseenter"
    popover-placement="top" popover="Open advanced filter options"
    ng-click="searchFilter({})">
    <text-swap breakpoint="'sm'" new-html="'<i class=\'fa fa-filter\'></i>'">
        {{ btnText }}
    </text-swap>
</button>
<button class="btn btn-danger grid-option-button pull-right"
    popover-append-to-body="true" popover-trigger="mouseenter"
    popover-placement="top" popover="Clear advanced filter options"
    ng-class="{disable: model.empty}" ng-click="resetModel()">
    <text-swap breakpoint="'sm'" new-html="'<i class=\'fa fa-times\'></i>'">
        Clear Filter
    </text-swap>
</button>

Answer 1

I ended up just passing the original text as a directive binding, and it seems to work.

Directive:

;(function(ng, undefined){
    'use strict';

    ng.module('common.directives')
        .directive('textSwap', textSwap);

    textSwap.$inject = ['$window', '$compile', '$debounce'];

    function textSwap($window, $compile, $debounce) {

        return {
            restrict: "E",
            scope: {
                breakpoint: '=',
                newHtml: '=',
                originalHtml: '='
            },
            transclue: true,
            template: '<span ng-bind-html="compiledHtml"></span>',

            link: function(scope, element, attrs, fn) {

                var keys = {
                    xs: 480,
                    sm: 768,
                    md: 992,
                    lg: 1200
                };

                checkAndReplaceContent();

                function checkAndReplaceContent() {
                    if ($window.innerWidth < keys[scope.breakpoint]) {
                        scope.compiledHtml = scope.newHtml;
                    } else {
                        scope.compiledHtml = scope.originalHtml;
                    }
                }

                ng.element($window).on('resize', function() {
                    $debounce(checkAndReplaceContent, 1000);
                });

            }
        };
    }
})(angular);

HTML

<button class="btn btn-info grid-option-button pull-right"
    id="rxsignal-filter-button"
    popover-append-to-body="true" popover-trigger="mouseenter"
    popover-placement="top" popover="Open advanced filter options"
    ng-click="searchFilter({})">
    <text-swap breakpoint="'sm'" new-html="'<i class=\'fa fa-filter\'></i>'" original-html="btnText" />
</button>
<button class="btn btn-danger grid-option-button pull-right"
    popover-append-to-body="true" popover-trigger="mouseenter"
    popover-placement="top" popover="Clear advanced filter options"
    ng-class="{disable: model.empty}" ng-click="resetModel()">
    <text-swap breakpoint="'sm'" new-html="'<i class=\'fa fa-times\'></i>'" original-html="'Clear Filter'" />
</button>