angularjs - How to add ellipsis with count of remaining item using angular? -

how can achieve ellipsis count of element not included in area.

example

i have array of name apple,mango,straw,litchi,orange,grapes

my container 100px wide can carry few name depending on width.

result should come as

apple,mango,straw... +3 more

or

apple,mango... + 4 more if(width less)

how achieve thing angular.

var ellipsiscreator = function(array) {                     var arraysize = [],                         size = 0,                         stopcounter = 0;                         scope.tooltiptext = null;                         scope.visibletext = null;                         scope.remaining = 0;                         for(var i=0;i<array.length;i++){                             var e=document.createelement('span');                                 document.body.appendchild(e);                                 e.style.fontsize = scope.fontsize+'px';                                 e.setattribute("class", "posabs");                                 e.innerhtml = array[i];                                 arraysize.push(e.offsetwidth+5);                                 e.remove();                                 if(size + arraysize[i] >=  scope.length){                                     stopcounter = i-1;                                     break;                                 }else{                                     size = size + arraysize[i];                                     stopcounter = i;                                 }                         }                         scope.visibletext = array.slice(0,stopcounter+1).join(', ');                         if(stopcounter<array.length-1){                             scope.tooltiptext = array.slice(stopcounter+1,array.length).join(', ');                             scope.remaining = (array.length-1) - stopcounter;                         }                 };