javascript - Angular directive inside ng-repeat getting pre-compiled value -

i'm writing thought simple directive take text within ng-repeat , if greater 50 characters, strip rest of text , add ellipses. repeat defined as:

<li ng-repeat="result in topsuggestions.suggestions">     <h4>{{result.title}</h4>     <p suggestion-limiter>{{result.text}}</p> </li> 

and directive:

app.directive("suggestionlimiter", [function () {     return {         restrict: "a",         link: function (scope, elem, attrs) {             console.log($(elem).text());             var maxtextlength = 50;             var ellipses = "...";             var currenttext = $(elem).text();              if (currenttext.length > maxtextlength) {                  currenttext = currenttext.substr(0, maxtextlength - ellipses.length) + ellipses;                  $(elem).text(currenttext);             }         }     } }]); 

the console.log($(elem).text()) resulting in {{result.text}}. i've tried using if (scope.$last) wait ng-repeat finish still got same result. simple i'm missing on one?

on other hand, don't think directive proper fit job. using filter instead of directive change result of expression. similar this:

filter('ellipsis', function() {   var ellipsis = '...';   return function(text, limit) {     text = typeof(text) !== 'undefined'? text: '';     return text.length > limit?       (text.substr(0, limit - ellipsis.length) + ellipsis):       text;   } }); 

and somehow use in context of ng-repeat

 <ul>    <li ng-repeat="item in list" ng-bind="item|ellipsis:50"></li>  </ul> 

check working example i've made.