My system:
Picture a manager for an online shopping cart:
app.controller('CartCtrl', function ($scope) {
$scope.data = [
{
id:0,
title:'product1'
},
{
id:1,
title:'product2'
}
];
$scope.countItems = function(){
var total = 0;
for(var i in $scope.data){
total++
}
return total;
}
});
This functionality is placed on a specific part of the page:
<ul ng-controller="CartCtrl">
<li ng-repeat="item in data">{{item.title}}</li>
</ul>
Elsewhere, I wish to show the number of items in my cart:
<div cart-item-number>{{countItems()}}</div>
To link the information I utilize a command:
app.directive('cartItemNumber', function() {
return {
restrict: 'A',
controller: 'CartCtrl'
};
});
My Query:
When the page loads, it displays the correct number. However, if an item is added or removed from the data object, the cart-item-number does not refresh.
What steps can I take to address this problem?