Ionic tab badge value not updating properly - angularjs

Question

This could be a misunderstanding of how Angular controllers work, but I am trying to understand why the badge values for my tabs are not being updated.
I have isolated the issue to a Codepen here: https://codepen.io/tyman7/pen/JKKEbO
Extract from HTML:
<ion-tab title="Home" icon="ion-home" href="#/tab/home" badge="badgeValue" ng-controller="HomeTabCtrl">
<ion-nav-view name="home-tab"></ion-nav-view>
</ion-tab>
Extract from JS:
.controller('HomeTabCtrl', function($scope)
{
$scope.badgeValue = 1;
$scope.updateTabValue = function()
{
$scope.badgeValue += 1;
}
}
I ended up finding a solution that involves creating another controller that the badge value looks at. I have modified the isolated Codepen slighty to demonstrate: https://codepen.io/tyman7/pen/pbbRpb
Extract from HTML:
<ion-tab title="Home" icon="ion-home" href="#/tab/home" badge="badgeValue" ng-controller="HomeCtrl">
<ion-nav-view name="home-tab"></ion-nav-view>
</ion-tab>
Extract from JS:
.controller('HomeTabCtrl', function($scope)
{
})
.controller('HomeCtrl', function($scope)
{
$scope.badgeValue = 1;
$scope.updateTabValue = function()
{
$scope.badgeValue += 1;
}
}
The thing is, I just don't understand why it needs to be done this way. What fundamental knowledge am I missing here?

Answer 1

You had multiple instances of the HomeTabCtrl. It created one when the 'tabs' state was entered and another when the 'tabs.home' state was entered. Your 'tab' badgeValue was in one instance and the 'tabs.home' value another. An Easy fix to the original is to change the name of the 'tabs.home' controller to 'HomeCtrl' instead and create an empty controller of that name. Then the updateTabValue will be called in the parent scope and update the badgeValue throughout.
Here is a codepen:
http://codepen.io/stich12/pen/Nrrprd