title: Angular JS truncate text and add read more
body: <p>I have an ng-repeat that is outputting a number of <code>&lt;p&gt;</code>. I would like to truncate the text and add a read more button that expands when you click it.</p>
  
  <p>This is what I have so far:</p>
  
  <pre><code>//NG-repeat
  &lt;div class="col-xs-4 mbm" ng-repeat="wine in wines"&gt;
      &lt;p readMore&gt; {{wine.copy|truncate: textLength }} 
          &lt;a ng-click="changeLength()" class="color3"&gt;&lt;strong&gt;More&lt;/strong&gt;&lt;/a&gt;
      &lt;/p&gt;
  &lt;/div&gt;
  
  //NG-click
  $scope.changeLength = function() {
      $scope.textLength = 9999;
  }
  </code></pre>
  
  <p>I have a custom directive that is able to truncate the length of the string. But when trying trying to modify the text length via and <code>ng-click</code> I am finding all the of items in the <code>ng-repeat</code> are modified. </p>
  
  <p>Is there a way to change a single <code>ng-repeat</code> item?</p>