Why do I lose one of my event bindings after joining a second time?

So when the user logs in and has unread messages, the user is automatically connected to a private chat with the another user via this event.

channel.on("unread_messages", (users) => {
     if (!users.users[0]) {

     var new_channel = Chat.createNewPrivateChannel(users.users[0], $rootScope.user.id)

     Chat.connectToPrivateChannel(new_channel).then((private_channel) => {
      $rootScope.privateMessages = Chat.getMessages()
      $rootScope.privateChannel = private_channel

If they don’t have unread messages they have to click on a button to display a chat button that will open a messagebox for them to send messages. The button(not the chat button) calls this function and it is in my chatcontroller.

$scope.startPrivateChat = function(event) {
 var id1 = ($(event.currentTarget).attr("agent-id")); 
 var id2= $rootScope.user.id;

 // this just returns a string private:3:23 for example by sorting
 //  the ids and joining them via colon.
 var new_channel = Chat.createNewPrivateChannel(id1, id2)

 var current_channel = Chat.getPrivateChannel();

 if (current_channel) {
   if (current_channel.topic == new_channel) {

    Chat.leavePrivateChannel(); // this just does channel.leave() and stop duplicate joins.

 Chat.connectToPrivateChannel(new_channel).then((channel) => {
   $rootScope.privateMessages = Chat.getMessages();
   $rootScope.privateChannel = channel;

Now I have a directive with three isolated scopes and the main parts of that directive that I want to show are these.

return {
restrict: 'E',
scope: {
  user: '=user',
  messages: '=messages',
  channel: '=channel'
link: (scope, element, attrs) => {
  scope.channel.on("message_created", (message) => {
    $timeout(() => {
      let el = element.find(".messages-container")
      if (el[0].scrollHeight - el.scrollTop() < el[0].clientHeight + 200) {
        setTimeout(() => { el[0].scrollTop = el[0].scrollHeight })
  ... more code goes here

the message_created is an event that gets binded to $rootScope.privateChannel object because of the two way binding.

And in several html pages the html code for my directive looks like this.


The problem goes like this. If the user has unread messages, then I join that private chat and the message_created event binding is attached to the $rootScope.privateChannel object. Then if I leave that private chat and start another private chat(this is another call to startPrivateChat), I lose the message_create event binding.

Why is that and what can I do to fix that?

Here is an image of what I’m talking about.