$rootScope.$broadcast in factory cannot change a value in other $scope

Question

I have a home template (ionic) has a tab like this:

<ion-tab title="ACCOUNT" icon="ion-trophy" href="#/home/account" badge="levelBadge" badge-style="badge-assertive" on-select="enteringAccount()" on-deselect="leavingAccount()" ng-controller="homeTabCtrl">
            <ion-nav-view name="tab-account" animation="slide-left-right"></ion-nav-view>
        </ion-tab>

I want the levelBadge value change when there is something happen in other scope.

In other scope, I have this controller (lessonCtrl). When click a button on this view, the controller call this function inside this controller:

$scope.testBoardcast = function() {
        MyFirebaseService.testBoardcast();
}

And inside MyFirebaseService (a factory), I have this function:

function testBoardcast() {
        $rootScope.$broadcast('level-up', 2);
}

And inside my home template homeTabCtrl, I am listen to level-up event like this:

$rootScope.$on('level-up', function(event, data) {
        console.log ("App received level up boardcast: " + data);
        $scope.levelBadge = parseInt(data, 10); 
    });

But the problem is, when I click the button on lessonCtrl, levelBadge did not get update and the badge will not show even the console log "App received level up boardcast: " is shown right after I clicked the button.

If I listen on just the homeTabCtrl scope like this:

$scope.$on('level-up', function(event, data) {
        console.log ("App received level up boardcast: " + data);
        $scope.levelBadge = parseInt(data, 10); 
    });

Nothing happen when I click the button on lessonCtrl.

I have no clue how to make the levelBadge dynamically change when I click the button in a completely different state in lessonCtrl.

UPDATE: Here is my ui-route:

.state('home', {
  cache: false,
    abstract: true,
    url: "/home",
    templateUrl: "app/home/home.html",
  controller: 'homeTabCtrl',
  onEnter: function($state, MyFirebaseService) {
    var userId = MyFirebaseService.LoginUserId();
    if (!userId) {
        $state.go('auth.signin');
    };
  }
})

.state('home.courses', {
  cache: false,
  url: "/courses",
  views: {
    "tab-courses": {
      templateUrl: "app/home/courses.html"
    }
  }
})

.state('app', {
    abstract: true,
    url: "/app",
    templateUrl: "app/layout/menu-layout.html",
  controller: 'AppCtrl'
})

.state('app.lesson', {
  cache: false,
  url: "/lesson/:id",
  views: {
    'mainContent': {
      templateUrl: "app/all/lesson-detail.html",
      controller: "lessonCtrl"
    },
  }
})

So home is an abstract state. The tabs is in the home template. The lessonCtrl is actually in another abstract state called App. They are not partner or child scope. Just 2 different scopes.

score 3 · Accepted Answer · edited May 23 '17 at 12:29

I would need to see your ui-router config ($stateProvider) to further debug why your code isn't working as expected. It is most likely due to the homeTabCtrl not being instantiated at the time the $broadcast is called.

One solution is to use a service. Make your changes to the service, and in your homeTabCtrl, have a watch on that service.

In your lesson controller call

Level.levelUp(1);

Then in your homeTab controller watch the Level service for change

$scope.$watch(
  function () {
    return Level.currentLevel();
  },
  function(newVal, oldVal) {
    $scope.level = newVal;
  }
);

Here is a plunker setting up this structure: http://plnkr.co/edit/mAASNGNqr37k9n0RR89X?p=preview

Edit

Look at this plunker which sets up a similar view hierarchy: http://plnkr.co/edit/hyKECbyYAG8XzUh8x58K?p=preview. Notice how the console log prints the init message when you navigate to and from the app and home states.

Everytime you change from the home to the app state, the home controller get uninstantiated and the app controller gets instantiated (this answer somewhat explains the flow: angularjs controller instantiation, ui-router).

So when you go to the app states, the home states cannot be listening for events. The singleton service will work as you want, so I would suggest using that instead of the pub/sub approach.

What do you mean "the homeTabCtrl not being instantiated at the time the $broadcast is called"? User need to navigate to the home.courses first (which homeTabCtrl is instantiated?), then go into app.lessons, then they pick a lesson to watch in app.lesson.:id. The lessonCtrl call the factory level up broadcast here. Since the console.log ("App received level up boardcast") is working immediately after I click the levelup button in lessonCtrl, the homeTabCtrl did instantiated I assume? But the $scope.levelBadge inside the $rootScope.$on did not get update (the view did not get updated). — Hugh Hou, Jun 12 '15 at 06:35
Wow. I have no idea it works that way. Is it Angular special behavior? I think I am making a fundamental architecture mistake? I kinda group functions/apps into different folder with its own abstract state. Any good resource you can point me to understand this better? BTW, your singleton service method work perfectly. — Hugh Hou, Jun 13 '15 at 18:41

$rootScope.$broadcast in factory cannot change a value in other $scope

UPDATE: Here is my ui-route:

1 Answers1