change variable only for one ng-repeat document angularjs - angularjs

Question

I'm trying to show more text when an user clicks a read more button:
<md-content class="md-padding" layout-xs="column" layout="row" layout-wrap>
<div flex-xs flex-gt-xs="50" layout="column" ng-repeat="paquete in paquetes">
<md-card>
<md-card-title layout="row" layout-xs="column">
<md-card-title-media layout-margin>
<img ng-src="{{paquete.img}}" class="md-card-image margin-auto" alt="image caption">
</md-card-title-media>
<md-card-title-text>
<span class="md-headline blue">{{paquete.title}}</span>
<span class="md-subhead dark-blue">{{paquete.desc | limitTo: limit.limit}}
<span class="threedots" ng-show="mas.mas">... </span>
<span style="cursor: pointer;" class="blue underlined"
ng-click="limitFunction(paquete.desc)">Leer
<span class="mas" ng-show="mas.mas">más</span>
<span class="menos" ng-show="menos.menos">menos</span>.
</span>
</span>
</md-card-title-text>
</md-card-title>
</md-card>
</div>
</md-content>
I'm limiting the initial descripction {{paquete.desc | limitTo: limit.limit}} and letting the user click to read more ng-click="limitFunction(paquete.desc)"
My controller:
$scope.limit = {limit: 200};
$scope.limitFunction = function (desc) {
$scope.limit.limit = desc.length;
};
But when I click on one of the ng-repeat elements, the $scope.limit changes to all of them instead of the one I'm clicking.
How do I change the $scope.limit to only the one that I'm clicking?

Answer 1

You could put the limit on the paquete object and pass that into your limit function
<span class="md-subhead dark-blue">{{paquete.desc | limitTo: paquete.limit}}<span class="threedots" ng-show="mas.mas">... </span><span style="cursor: pointer;" class="blue underlined" ng-click="limitFunction(paquete)">Leer <span class="mas" ng-show="mas.mas">más</span><span class="menos" ng-show="menos.menos">menos</span>.</span></span>
In the controller:
$scope.limitFunction = function (paquete) {
paquete.limit = paquete.desc.length;
};