How to access the scope outside ng-view

Question

On the navigation bar, I have a shopping cart snapshot (total items, total price) which uses $scope.cart.

In the ng-view, there are pages to add/remove items in the shopping cart.

It appears that ng-view created an isolated scope. If I add items into $scope.cart, it goes to the scope that belongs to ng-view. How can ng-view share the parent scope?

Answer 1

The $scope exists inside the ng-controller. The ng-view directive only tells to Angular JS the place where partials will be loaded. You have couple of ways to archive this cart in another place outside, as:

1) You can create an outter contoller with $scope.cart and propagate from the inner controller the value, using the same variable name.

• AngularJS–Part 3, Inheritance

2) Another way could be using a Service, that's singleton in Angular JS, to set the cart and then change it in the inner controller, to propagate to the outter one.

• Passing data between controllers in Angular JS?