Aplicativo angular / nó insanamente simples não funciona como esperado - javascript, node.js, angularjs

Fiz a aplicação mais simples possível usando angular e nó. É um aplicativo de chat que possui um modelo ng em um campo de texto.

Quando o valor do campo de texto muda, a mensagem é emitida e o nó a envia. Eu atribuo esse valor a uma variável, mas é sempre um caractere atrás. Sinceramente, não tenho ideia do porquê.

Por exemplo, o valor do campo de texto é "hello world" e o {{receive}} imprime "hello worl".

O que é pior é quando eu console.log os dados que têm o valor total, eu os atribuo imediatamente depois, sem alterá-los, e falta um caractere. Estou fazendo algo errado?

<p>{{receive}}</p>
<input ng-model="msg"></input>
<script>

var app = angular.module("app", []);
app.controller("chat", ["$scope",

function($scope) {
var socket = io.connect();
$scope.msg = "";
$scope.receive = "";

$scope.$watch("msg",function(){
socket.emit("send message", $scope.msg);
});

socket.on("new message", function(data){
console.log(data);
// console.logging results in the entire message
$scope.receive = data;
});

}]);

</script>

var express = require("express"),
app = express(),
server = require("http").createServer(app),
io = require("socket.io").listen(server);

server.listen(3000);

app.get("/", function(request, response){
response.sendfile(__dirname + "/index.html");
});

io.sockets.on("connection", function(socket){

socket.on("send message", function(data){
io.sockets.emit("new message", data);
});

});

Respostas:

Você precisa usar $scope.$apply para atualizar suas ligações ao alterá-las fora de uma função Angular.

socket.on("new message", function(data){
console.log(data);
// console.logging results in the entire message
$scope.receive = data;
$scope.$apply();
});

Ele também pode ser usado dessa forma, o que captura quaisquer erros lançados dentro da função e as atualiza de qualquer maneira.

socket.on("new message", function(data){
console.log(data);
// console.logging results in the entire message
$scope.$apply(function () {
$scope.receive = data;
});
});