How to transfer data from the service to the controller in real time?

Question

Angular

I would like to implement a chat following the example only with the division of functionality in Angular.
HTML

<form name="publish" ng-submit="msgSend()">
    <input type="text" name="message">
    <input type="submit" value="Send">
</form>
<p >{{collection}}</p>

How I see the big picture.
1. When submitting the form, a function in the controller is triggered, which passes the entered text to the service.
2. Then in the service we generate a request to the server and pass the user's text to it.
3. On the server, we get the user's text, write it to an array with all messages (for the test, it will do the same).
4. On the server, we generate a response to all clients. We pass them an array with all messages
5. We catch an event from the server on the service.
5. The service sends data to the controller.
6. Controller updates html and displays messages.
I have a problem with 5 and 6 stages.
It turns out that in the controller I received a message once, which was undefined at the time of launch, and that's it. With subsequent changes to the tmp variable in the service, the $scope.collection variable does not want to be updated and, accordingly, nothing is displayed in the html.
How can I get real-time data from the service in the controller?
Controller

function chatController($scope, chatService) {
        // on submit call method from service
        $scope.msgSend = function() {
            var msg = document.forms.publish.message.value;
            chatService.send(msg);
        }
        // get message
        $scope.collection = chatService.get;
    }

Service

function chatService() {
        // open websocket connection
        var socket = io.connect('http://localhost:8080');
        // send msg to server
        function msgSend(msg) {
            socket.emit('message', msg);
        };
        function msgGet(msg) {
            return msg;
        };
        // catch messages from server in realtime
        var tmp;
        socket.on('message', function(msg) {
            tmp = msg;
        });
        // something like interface
        var methods = {
            send: msgSend,
            get: tmp
        };
        return methods;
    }

Nothing interesting on the server

io.on('connection', function(socket){
  //once server get message
  socket.on('message', function(msg){
     var collection = [];
    collection.push(msg);
    //send collection array to all users
    io.emit('message', collection);
  });
});

Answer 1

class ChatComponent {
   constructor(messages) {
       this.messages = messages;
       this.list = [];
   }

   $onInit() {
       this.messages.list().then(
          (list) => this.list = list;
       );

       this.messages.onNewMessage((message) => {
           this.list.push(message);
       });
   }
}

angular
  .module('app')
  .component('messageList', {
    controller: ChatComponent,
    templateUrl: 'chat/messages.html'
}

short moral - do not make crutches. Pass things explicitly, you can through events, you can do something else, you can fill in the list of messages directly from the service:

class MessagesListComponent {
}

module.component('messageList', {
    bindings: {
        messages: '='
    },
    controller: MessagesListComponent 
}