How to create a global counter in angular as a service - angularjs

Question

I'm new to AngularJS and I wanted to know, how can I change a global value via a "service"?
I build an simple app-services, which includes a "count"-variable and a "increase"-function.
myApp.service("itemCount", function(){
var count = 1;
this.count = count;
return {
count: this.count,
increase: function(){
this.count = this.count + 1;
return this.count;
}
// maxItems: --> TodoCtrl $scopes.todos.length
}
});
I build up a simple todo-list:
myApp.controller('TodoCtrl', function($scope, $http, itemCount) {
$http.get('todos.json')
.success(function(data){
$scope.todos = data;
var start = 0;
$scope.todo = $scope.todos[start];
$scope.nextTodo = function(num){
if(num < $scope.todos.length){
$scope.todo = $scope.todos[num];
itemCount.increase();
console.log("count = " + itemCount.count);
}
};
});
});
At least I build a "progress"-control:
myApp.controller('ProgressCtrl', function ($scope, itemCount) {
$scope.max = 10; // hard coded
$scope.value = itemCount.count;
});
How can I achieve, that my "progress"-control gets the latest count value?
Example: http://plnkr.co/edit/dCinO4iGDfql40GStGr2
Thx for help

Answer 1

Get the value using a function rather than the variable or add the service to the scope.
http://plnkr.co/edit/LBISC3RhIAKgtgXJjUDD?p=preview
{{getCount()}} / {{max}}
{{itemService.count}} / {{max}}
myApp.controller('ProgressCtrl', function ($scope, itemCount) {
$scope.max = 10; // hard coded
$scope.value = itemCount.count;
$scope.getCount = function(){ return itemCount.count; };
$scope.itemService = itemCount;
});