Filter in ng-bind-html give an error if open new tab

Question

I'm using HTML Line Break filter to replace \n with <br> like this

angular
.module('App')
.filter('addHtmlLineBreaks', addHtmlLineBreaks);

function addHtmlLineBreaks () {
    return function (text) {
        var output = text.replace(/\n/g, '<br/>');
        return output;
    };
}

then I apply it using ng-bind-html

<p ng-bind-html="coach.Description | addHtmlLineBreaks"></p>

Everything seems work fine, however I have a link somewhere that open new tab

<a ui-sref="Detail" target="_blank">

Now the filter still work but it give an error

angular.js:13920 TypeError: Cannot read property 'replace' of undefined
at mtc.min.js:1
at fn (eval at compile (angular.js:14817), <anonymous>:4:311)
at regularInterceptedExpression (angular.js:16043)
at expressionInputWatch (angular.js:15948)
at Scope.$digest (angular.js:17515)
at Scope.$apply (angular.js:17790)
at done (angular.js:11831)
at completeRequest (angular.js:12033)
at XMLHttpRequest.requestLoaded (angular.js:11966)

Any idea what happen and how to fix?

Answer 1

Make sure text is defined:

 angular.isDefined(text) ? text.replace(/\n/g, '<br/>') : ''