Messages do not appear on the screen using Angular

Question

I’m finishing a messaging app, however, I’m not able to make the messages appear on the screen.

HTML:

<div class="card" ng-repeat="mensagem in mensagens">
  <div class="item item-text-wrap">
    <h2>{{mensagem.usuario}} / {{mensagem.logradouro}}</h2>
    <p>{{mensagem.msg}}</p>
    <p>{{mensagem.hora}}</p>
  </div>
</div>

controller:

.controller('logradouroCtrl', function ($scope, $http, $window, $stateParams, $ionicScrollDelegate, socket) {

$scope.mensagem = {
    msg:""
  };

var pegaMsgsLogra = function () {

    idCep = $window.localStorage.getItem('idCep');
    idUsuario = $window.localStorage.getItem('idUsuario');
    var nome = $window.localStorage.getItem('nome');
    var usuario = $window.localStorage.getItem('usuario');
    var uf = $window.localStorage.getItem('uf');
    var cidade = $window.localStorage.getItem('cidade');
    var bairro = $window.localStorage.getItem('bairro');
    var logradouro = $window.localStorage.getItem('logradouro');


    socket.message(function(res){
        console.log(res);
        $scope.mensagens.push(res);
    })

        $ionicScrollDelegate.resize();
        $ionicScrollDelegate.scrollBottom(true);
}

services.js:

.factory('socket', function ($rootScope) {
    var wsUri = "ws://localhost:1234";//ocalhost:1234
    var socket = new WebSocket(wsUri);
    return {
        send: function (data) {
            socket.send(JSON.stringify(data));
        },
        message: function(callback){
            socket.onmessage = function(ev) {
                var result = JSON.parse(ev.data); //PHP sends Json data
                console.log(result);
                callback(result);
                //ev.data são os dados da mensagem que irão aparece na tela
                $rootScope.$apply(function () {
                    **$rootScope.mensagens.push(result);**
                });

            };
        }
    };
});

app js.:

.factory('socket', function ($rootScope) {
    var wsUri = "ws://localhost:1234";
    var socket = new WebSocket(wsUri);
    return {
        send: function (data, callback) {
            socket.send(JSON.stringify(data));
            var args = arguments;
        },
        message: function(){
            socket.onmessage = function(ev) {
                var result = JSON.parse(ev.data); //PHP sends Json data
                $rootScope.$apply(function () {
                    $rootScope.mensagens.push(result);

                });

            };
        }
    };
});

Messages appear this way on the screen:

Cannot read Property 'push' of Undefined

and points to that controller line: $Scope.mensagens.push(res);

Answer 1

Gustavo what I could notice initially, I am not evaluating for what it is using nor as this using the angular architecture, I am evaluating the logic of $Scope.message initially, to better exemplify I did a JSBIN/qodajoc:

//IMagine que isto é como funciona a estrutura de objetos do angular em nivel $scope ou $rootScope o que diferencia um do outro é o grau de profundidade de e exposição entre os modulos.

var $scope = { 
   mensagem:{
     msg: "legal"
   } 
};

console.log($scope.mensagem.msg);
console.log(typeof($scope.mensagem));
// $scope.mensagem.push("asd");
// isto não é possivel ("TypeError: $scope.mensagem.push is not a function")  pois seu $scope.mensagem é um objeto. Para poder fazer o ajuste devido ele deveria ser uma estrutura de array para efetuar push. 

// Veja agora


var $scope = { 
   mensagem:[
     {
       msg: "legal"
     }
   ]
};

console.log(typeof($scope.mensagem));

$scope.mensagem.push({
 msg: "asd" 
});

console.log($scope.mensagem);

Taking advantage of the hook, if you want to keep using an object instead of the $Scope.message array, I would recommend using KEY/item:

$scope.mensagem = {

    0:{
       msg: "lero lero",
       status: "warning"
    },
    41:{
       msg: "lero lero",
       status: "warning"
    }


}

So if you need to check/update or etc an object just search by KEY

$scope.mensagem[41].msg = "";