How do I access an array from my shopController in my cartController to display all items (and remove if desired)?

I can’t figure out how to share an array between two controllers. One
controller is meant to fill the array and the other presents the data and
allows the user to remove items from the array.

The structure of my
files
are:

templates/cart.html 

 templates/shop.html 

 app.js

 index.html

I have tried route service.

I expect to be able to push user input into an array in the
“shopController” and present that info in a template using a second
controller called “cartController” and allow users to remove items if
desired.

app.js

//reference routing in order to route and render templates
var myApp=angular.module("myApp", []); 

//create the the routing for the app
myApp.config(['$routeProvider',
    function($routeProvider){
        var array = [];
        $routeProvider.
            when('/shop', {
                templateUrl: 'templates/shop.html',
                controller: 'shopController',
                //items: array
            }).
            when('/cart', {
                templateUrl: 'templates/cart.html',
                controller: 'cartController',
                //items: array
            }).
            otherwise({
                redirectTo: '/shop'
            });

    }]);
myApp.service('CartContents', function(){
    var privateCart = [];

    var additem = function(newitem){
        privateCart.push(newitem);
    };

    var viewCart = function(){
        return privateCart;
    };

    return {
        additem: additem,
        viewCart: viewCart
    };
})

//contrller functions that manage what each page/template does

myApp.controller('shopController', function($scope, /*$route*/CartContents){
    $scope.message = "Shopping Page";
    //var items = $route.current.items;
    $scope.selectOrder = function(currItem){
        CartContents.additem(currItem);
    };
});

myApp.controller('cartController', function($scope, /*$route*/CartContents){
    $scope.message = "Cart Page";
    //var items = $route.current.items
    $scope.checkout = CartContents.viewCart();
});

index.html

<!DOCTYPE html>
<html lang ="en">
    <head>
        <title>Simple Web App</title>
        <link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet">

        <style>
                body {
                  padding-top: 10px;
                  background-color: #F5F5F5;
                }
        </style>
    </head>

    <body ng-app="myApp">                                          <!--Angulars way of declaring a root element of the app-->
        <div class="container">
            <div class="row">
                <div class="col-1">
                    <ul class="nav">
                        <li><a href="#shop">Shop</a></li>   <!--Refrence the .html files that will be separate pages-->
                        <li><a href="#cart">View Order</a></li>
                    </ul>
                </div>
                <div class="col-2">
                    <div ng-view></div>                          <!--.html templates will be rendered here-->
                </div>
            </div>
        </div>
        <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
        <script src="app.js"></script>
    </body>
</html>

cart.html

<h1> Cart Page </h1>
{{message}}

shop.html

<h1> Shoping Page </h1>
{{message}}

<div class = "selectItem">
    <input type="text" ng-model="currItem" placeholder = "Select Item">
    <button ng-click="selectOrder()">Select</button>
    <ul>
        <li ng-repeat="item in items">{{item}}</li>
    </ul>
</div>

Source: AngularJS