$scope.myVar updates but not in the view - angularjs

Question

I have a template nested in an other template (menu is the parent template) which share the same controller. My Controller gets the value from a service called counterOperations. Althought $scope.total seems to be updating in console.log the view does not update the value.
Controller
.controller('ListController', function ($scope, $http, $state, counterOperations, userService) {
//Some code
$scope.add = function (index) {
$scope.total = counterOperations.getTopCounter();
console.log($scope.total);
};
})
Templates
$stateProvider
.state('app', {
url: '/app',
abstract: true,
templateUrl: 'templates/menu.html',
controller: "ListController"
})
$stateProvider
.state('app.list', {
url: '/list',
views: {
'products': {
templateUrl: 'templates/product-list.html',
controller: "ListController"
}
}
})
with ng-click I trigger a function which calls some functions from a service
The view variable for menu
<span>{{total}}</span>
I have tried to update the value this way but nothing changes
setTimeout(function() {
$scope.total = counterOperations.getTopCounter();
}, 1000);
Any ideas ?

Answer 1

Here your 2 states "app" and "app.list" have same controller, when you change state from "app" to "app.list" regardless of same controller controller will reinstantiated which means value in $scope.total variable will lost and will reset in next state.
Solution -
Assign total to $rootScope if you want it in other state too
$scope.add = function (index) {
$rootScope.total = counterOperations.getTopCounter();
};

Answer 2

.controller('ListController', function ($scope, $http, $state, counterOperations, userService) {
//Some code
$scope.total = ''; //or $scope.total = 0;
$scope.add = function (index) {
$scope.total = counterOperations.getTopCounter();
console.log($scope.total);
};
})
Check if the above works for you?