Angularjs use one controler in two views, scope is not loading - html

Question

I have an e-commerce page. I want when the user deletes a product from the shopping cart to reload the specific divs. I have the index page that contains
a div with an ng-repeat with my products, and in the index I have an content view with the same ng-repeat. I want when for example I delete a
product, to update the these ng-repeat. I tried, the $rootscope.$digest; and $scope.$apply(); but there are not working. Below, you can see my code.
My index page
<div ng-controller="ShoppingCartCtrl">
<div data-toggle="dropdown"> </div>
<ul>
<li ng-repeat="item in resultShoppingCart">
<a title="Product Title Here" ui-sref="single_product({id:item.productId})"></a>
<div class="product-details">
<div class="access"><a title="Remove This Item" ng-click="delete(userId,item.productId)">Remove</a> <a class="btn-edit" title="Edit item" ui-sref="shoppingCart"><i class="icon-pencil"></i><span class="hidden">Edit item</span></a> </div>
<p class="product-name"><a ui-sref="single_product({id:item.productId})" ng-bind="item.productName"></a> </p>
<strong ng-bind="item.quantity"></strong> x <span class="price" ng-bind="item.unitPrice"></span>
</div>
</div>
</li>
</ul>
</div>
</div>
<div class="actions">
<a ui-sref="shoppingCart"><span>View Cart</span></a>
</div>
<div id="wrap">
<!-- Content -->
<div class="container">
<div ui-view=""></div>
</div>
</div>
My shopping cart page
<tbody>
<tr ng-repeat="item in resultShoppingCart track by $index">
<td class="cart_product"><a ui-sref="single_product({id:item.productId})"></a></td>
<td class="cart_description">
<p class="product-name" ng-bind="item.productName"></p>
</td>
<td class="price" ng-bind="item.unitPrice"><span></span></td>
<td class="qty">
<input class="form-control input-sm" type="text" ng-value="item.quantity" ng-model="item.quantity">
<i class="fa fa-plus" ng-click="changeQuantity(item, 1)"></i> <i class="fa fa-minus" ng-click="changeQuantity(item, -1)"></i>
</td>
<td class="price" ng-bind="item.price"><span></span></td>
<td class="action"><a ng-click="delete(userId,item.productId)">Delete item</a></td>
</tr>
</tbody>
And my shopping cart controller:
$scope.delete = function (userId, productId) {
var jsonDelete = '...';
dataProvider.delete(jsonDelete).then(function (response) {
//$scope.$digest(); //not working
//$scope.$apply();//not working
});
$state.reload();
//$scope.$digest;//not working
//$scope.$apply();//not working
};
With the state.reload I can reload my shopping cart page. Can anyone help me?

Answer 1

Few modifications will make it work.
Pass $index to your delete function, like,
ng-click="delete(userId,item.productId, $index)"
Then inside your delete handler, you can use splice to delete the object from your existing array. Like
$scope.delete = function (userId, productId, index) {
var jsonDelete = '...';
dataProvider.delete(jsonDelete).then(function (response) {
$scope.resultShoppingCart.splice(index, 1);
});
$state.reload();
};
Edit:
Use events to update the parent value. Like,
In shopping cart
$scope.delete = function (userId, productId, index) {
var jsonDelete = '...';
dataProvider.delete(jsonDelete).then(function (response) {
$scope.resultShoppingCart.splice(index, 1);
$rootScope.$emit('updateList',productId);//Passing productid instead of index is safer as it is not necessary to stick to the order of array.
});
$state.reload();
};
In index page
Catch the event which is triggered after deleting.
$rootScope.$on('updateList', function (productId) {
for (let i = 0; i < $scope.resultShoppingCart.length ; i++) {
if ($scope.resultShoppingCart[i].productId == productId) {
$scope.resultShoppingCart.splice(i, 1);
break;
}
}
});