How to select quantity for ng-repeat values - angularjs

Question

How can i use counter for ng-repeat values?? . I have used a 2 functions add and minus quantity and called those function in controller. The problem is when i click add or minus the counter does increase or decrease for all the ng-repeat datas . i want to increase or decrease quantity for each and every product..can anyone post a sample code or for the screenshot below ??
Screenshot
controller.js
.controller('grocery', function($scope, $http) {
$http.get('/groceryjson.json')
.success(function(response) {
$scope.mydata = response;
$scope.booking = [];
$scope.toggle = function(image) {
$scope.selectedImage = image.product_name;
$scope.selected_can_rate = image.can_rate;
$scope.product_name = image.product_name;
/* $scope.register.product_name = image.product_name;*/
$scope.can_path = image.can_path;
/*$scope.register.can_path = image.can_path;*/
$scope.booking.push(image)
console.log($scope.booking);
};
})
$scope.myEvent = function() {
window.location = "#/app/booking";
}
$scope.canqty = 0;
$scope.addqty = function(no){
$scope.canqty++
}
$scope.subqty = function(no){
if($scope.canqty >=1){
$scope.canqty--
}
};
})
grocery.html
<ion-view view-title="Grocery">
<ion-floating-button ng-click="myEvent()" has-footer="false" button-color="#2AC9AA" icon="ion-plus" iconColor="#fff">
</ion-floating-button>
<ion-content>
<div class="row" ng-click="toggle(image)" ng-repeat="image in mydata">
<div class="col col-30 grocery-img">
<img src="{{image.can_path}}" alt="{{image.product_name}}">
</div>
<div class="col col-30">
<div class="grcoery-header">
{{image.product_name}}
</div>
<!-- <div class="grocery-desc">
{{data.desc}}
</div> -->
</div>
<div class="col col-40">
<div class="grocery-buy">
<a class="button buy">Add</a>
</div>
</div>
</div>
<div class="row" ng-repeat="data in booking track by $index">
<div class="col col-40">
<img src="{{data.can_path}}" alt="{{data.product_name}}" style="width:100px;">
</div>
<div class="col col-60">
<div class="row">
<div class="col col-30">
<button class="add" ng-click="addqty(no)"></button>
</div>
<div class="col col-30" >
<div class="canqty-2">{{canqty}}</div>
</div>
<div class="col col-30">
<button class="minus" ng-click="subqty(no)"></button>
</div>
</div>
</div>
</div>
</ion-content>
</ion-view>

Answer 1

The problem here is that you try to change a variable that is attached to your $scope principal, no contain in your object.
So something like that should work :
View:
<div class="row" ng-repeat="data in booking track by $index">
<div class="col col-40">
<img src="{{data.can_path}}" alt="{{data.product_name}}" style="width:100px;">
</div>
<div class="col col-60">
<div class="row">
<div class="col col-30">
<button class="add" ng-click="addqty(data)"></button>
</div>
<div class="col col-30" >
<div class="canqty-2">{{data.canqty}}</div>
</div>
<div class="col col-30">
<button class="minus" ng-click="subqty(data)"></button>
</div>
</div>
</div>
</div>
Controller :
$scope.addqty = function(data){
data.canqty++
}
$scope.subqty = function(data){
if($scope.canqty >=1){
data.canqty--
}