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

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