Share data between pages with the same controller automatically - Angular JS

Question

I am working with Ionic framework. I've got two templates both of which use the same "ListController" controller:

1) A list of products.

2) A detailed view of a specific product.

Both templates have a counter field which should be updated when user adds or removes products.

On the header I have a counter for the sum of all products.

What I need is to automatically be updated the fields(specific product counter, total counter) in two templates. When I say automatically I mean when the user adds products in the first template then these should be updated to the second one.

Here's my first template:

<ion-list>
      <ion-item class="noPadding" ng-repeat="item in meatTypes" href="#/{{item.imgname}}">
        <div class="row counterLine relative noPadding">
            <img class="counterBg" src="img/counter.png" alt="pansetes" align="right"/>
            <span class="itemCounter" id="product_{{item.id}}">0</span>
        </div>
        <div class="row">
            <div class="col relative">
                <img class="itemImg" src="img/{{item.imgname}}.png" alt="pansetes"/>
            </div>
            <div class="col relative">
                <ul class="centerize">
                    <li class="itemTitle ">{{item.name}}</li>
                    <li class="itemSubtitle">{{item.subname}}</li>
                </ul>
            </div>
            <div class="col relative">
                <ul class="centerize">
                    <li class="itemPrice">{{item.price}}€</li>
                    <li class="itemDiscount">{{item.productdiscount}}%</li>
                </ul>
            </div>
            <div class="col relative">
                <button class="addMore centerize" id="addMore" onclick="return false">+</button>
            </div>
        </div>
      </ion-item>
    </ion-list>

Here's my second template:

<ion-list>
        <ion-item class="noPadding" ng-repeat="item in meatTypes | filter: {imgname : whichproduct}">
            <div class="row noPadding">
                <div class="col col-20 noPadding item-text-wrap">
                    <p class="expires">
                        Κατανάλωση εντός </br> <strong>4</strong> </br>Hμερών.
                    </p>
                </div>

                <div class="col noPadding col-60">
                    <img class="detailsImg" src="/img/{{item.imgname}}.png" alt="{{item.name}}"/>
                </div>

                <div class="col col-20 noPadding">
                    <div class="row noPadding">
                        <div class="col noPadding">
                            <img class="detailsCounterBg" src="img/counter.png" alt="pansetes" align="right"/>
                            <span class="itemCounter" id="detailsCounter">{{counters[item.id]}}</span>
                        </div>                      
                    </div>
                    <div class="row noPadding"> 
                        <div class="col noPadding">
                            <ul>
                            <li><button class="addMore" id="addMore">+</button></li>
                            <li><button class="addMore"  id="subMore">-</button></li>
                        </ul>   
                        </div>                          
                    </div>
                </div>
            </div>              
        </ion-item>
    </ion-list>

And here's my app.js router and controller:

    .config(function($stateProvider, $urlRouterProvider) {
  $urlRouterProvider.otherwise('list')

  $stateProvider
  .state('list', {
    url: '/list',
    templateUrl: '/templates/product-list.html'
  })

 $stateProvider
  .state('details', {
    url: '/:aId',
    templateUrl: '/templates/detail.html',
    controller: "ListController"
  })
})


.controller('ListController',function($scope, $http, $state){
  $http.get('js/data.json').success(function(data){
      $scope.meatTypes = data;
      $scope.whichproduct = $state.params.aId;
      $scope.total = $('#totalCounter').html();
      $scope.counters = [];
      $(".itemCounter").each(function(){
          $scope.counters.push($(this).text());
      });

  }); 
});

For now I have found a permanent solution as you can see in my controller but I think it misses something.

here's a :screenshot