dd-collapse-text with emoji filter

I'm using dd-collapse-text directive to collapse descriptions in my webpage and works fine.

<span data-dd-collapse-text="350" data-ng-bind-html="description"></span>

Result example (not for 350 characters):

Lorem Ipsum ... (more)

But, now I want to use it for the comments; and they are filtered with emoji filter for the icons.

And this is not working.:

<span data-dd-collapse-text="350"  data-ng-bind-html="comment | emoji"></span>

The result is the same that this code... All the comment text, with emoji icons.

<span data-ng-bind-html="comment | emoji"></span>

What I need to change or do in my code? Any idea?

Thank you. Below I put the dd-collapse-text directive.

(function () {
    'use strict';

    angular
        .module('core')
        .directive('ddCollapseText', collapseText);

    collapseText.$inject = ['$compile'];

    /* @ngInject */
    function collapseText($compile) {
        return {
            restrict: 'A',
            replace: true,
            link: function(scope, element, attrs) {

                // start collapsed
                scope.collapsed = false;

                // create the function to toggle the collapse
                scope.toggle = function() {
                    scope.collapsed = !scope.collapsed;
                };

                // get the value of the dd-collapse-text attribute
                attrs.$observe('ddCollapseText', function(maxLength) {
                    // get the contents of the element
                    var text = element.text();

                    if (text.length > maxLength) {
                        // split the text in two parts, the first always showing
                        var firstPart = String(text).substring(0, maxLength);
                        var secondPart = String(text).substring(maxLength, text.length);

                        // create some new html elements to hold the separate info
                        var firstSpan = $compile('<span>' + firstPart + '</span>')(scope);
                        var secondSpan = $compile('<span ng-if="collapsed">' + secondPart + '</span>')(scope);
                        var moreIndicatorSpan = $compile('<span ng-if="!collapsed">...</span>')(scope);
                        var toggleButton = $compile('<span class="collapse-text-toggle" ng-click="toggle()">{{collapsed ? "less" : "more"}}</span>')(scope);

                        // remove the current contents of the element
                        // and add the new ones we created
                        element.empty();
                        element.append(firstSpan);
                        element.append(secondSpan);
                        element.append(moreIndicatorSpan);
                        element.append(toggleButton);
                    }
                });
            }
        };
    }
})();