使用后退按钮时$ broadcast和$ on issue

Question

I have 2 views ('index' and 'item').

'index' has a button that just go to 'item'.

'item' has a controller that calls a service that broadcast an event, and the controller keeps listening for this event to fill an object with a value.

Problem : at the first time that I click on the button and I go to 'item', I get the correct object value. However, if I click on back button (returning to 'index') and click on the same button again, I go to 'item' but the object is empty.

MyService

update: function() {
  $rootScope.$broadcast('event:item-updated');
  console.log("broadcast item updated");
  return;
}

ItemCtrl

.controller('ItemCtrl', function($scope, $state, MyService) {
  console.log("Item controller");
  MyService.update();
  $scope.item = {};
  $scope.$on('event:item-updated', function(e, status) {
    $scope.item = {"name": "My Item"};
    console.log("on item updated");
  });
}

Index html

<ion-view view-title="Index">
  <ion-content>
    <div>
      <button class="button" ui-sref='app.item'>
        Item
      </button>
    </div>
  </ion-content>
</ion-view>

Item html

<ion-view view-title="Item">
  <ion-content>
    <div>
      {{item.name}}
    </div>
  </ion-content>
</ion-view>

Using some console.log(), I can check that:

First time:

• Item controller
• broadcast item updated
• on item updated

Second time:

• Item controller
• broadcast item updated

So, for some reason, the listener is not working when I go to 'item' other times.

Answer 1

I solved the problem changing the order that I declared the listener and called the server.

.controller('ItemCtrl', function($scope, $state, MyService) {
  console.log("Item controller");
  $scope.item = {};
  $scope.$on('event:item-updated', function(e, status) {
    $scope.item = {"name": "My Item"};
    console.log("on item updated");
  });
  MyService.update();
}

So, I should declare the listener before call the service (that broadcast the event).