AngularJS: отображать разделенный текст динамически с треком

Question

Я хочу отобразить текст, разделенный линией разрыва и ограниченный фиксированной длиной, которую отображаемый текст не должен превышать.Вот код Js:

angular.module('app').filter('cut', function () {
  return function (value, max, tail) {
    if (!value) return '';

    max = Number(max);
    if (!max || max === Infinity) return value;

    if (_.sum(value, v => v.length) < max) return value;

    var totalLength = 0;
    var result = [];
    for (var i in value) {
      if (totalLength + value[i].length > max) {
        var partialString = "";
        var splitted = value[i].split('');
        for (var j in splitted) {
          if (totalLength + Number(j) + 1 <= max) {
            partialString += splitted[j];
          }
        }
        result.push(partialString);
        totalLength += partialString.length;
        break;
      }
      else{
        result.push(value[i]);
        totalLength += value[i].length;
      }
    }

    result[result.length - 1] += (tail || ' …')

    return result;
  };
});

angular.module("app").controller("ctrl", ["$scope", function($scope){
    var vm = this;

    $scope.event = { content: "some long string", $limit: 600 };
    vm.splitByLineBreak = function(text) {
      if (text) {
        return text.split("\n");
      }
      return text;
    }
  ]);

И HTML-код:

<div ng-repeat="elem in ctrl.splitByLineBreak(event.content) | cut: event.$limit  track by $index">
    <span ng-bind-html="elem"></span>
</div>
<div ng-if="event.content.length > 600">
    <a href="" ng-click="event.$limit === Infinity ? event.$limit = 600 : event.$limit = Infinity">
        {{event.$limit === Infinity ? 'Show less': 'Show more'}}
    </a>
</div>

Проблема заключается в том, что если один элемент разделенной строки обрезается фильтром, когда я нажимаюпоказать дополнительную ссылку, вырезанная строка не обновляется и не отображается полностью.