AngularJS Directive to Modify ng-bind and Add Ellipsis -

i've made angularjs directive add ellipsis overflow: hidden text. doesn't seem work in firefox, , don't believe i've structured possible. flow is:

1. add directive attribute html element
2. directive reads ng-bind attribute scope
3. directive watches changes ng-bind in link function
4. on ng-bind change, directive fancy calculations determine text should split , ellipsis added (i've not included code here, assume works)
5. directive sets element's html equal new string, not touching ng-bind

html

<p data-ng-bind="articletext" data-add-ellipsis></p> 

directive

app.directive('addellipsis', function(){     return {         restrict    : 'a',         scope       : {             ngbind    : '='  // full-length original string         },         link        : function(scope, element, attrs){             var newvalue;              scope.$watch('ngbind', function () {                 /*                  *  code removed - build shortened string , set to: newtext                  */                   element.html(newtext);  // - not work in firefox , not best practice             });         }     }; }); 

the line in question last 1 in directive:

 element.html(newtext) 

i'm assuming template-style approach should used? i'm unclear how best approach answer. help.

you use filter instead. this:

filter

app.filter('addellipsis', function () {     return function (input, scope) {         if (input) {             // replace real implementation             return input.substring(0, 5) + '...';           }     } }); 

html

<p data-ng-bind="articletext | addellipsis"></p>