How to do two views in a view with angularJS?

I have a chat app and the problem I'm having is the following: When sending a message, it takes a while to be sent and appears on the screen, because it goes to a database, via backend in php that I did, and then back through another php that searches the message and displays on the screen . So one solution that I thought to break the bough was this, display my messages, right on the screen, like in that example and only then send pro backend .. I already have a screen that displays messages coming from the database, but how do I display the messages I send on the same screen?

My view:

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

Controller:

$scope.enviarMsgChat = function (mensagem) {
    //console.log(mensagem);
    $scope.disableButtonChat = true;

    var dia = moment().format(); //2016-02-16 T 16:05:52-02:00
    var diaP = dia.split('T');
    var dia = diaP[0];

    var horaP = diaP[1];
    var horaP2 = horaP.split(':');
    var hora = horaP2[0]+':'+horaP2[1];

    var idUsuario = $window.localStorage.getItem('idUsuario');
    var nome = $window.localStorage.getItem('nome');
    var usuario = $window.localStorage.getItem('usuario');
    var msgChat = {
        idUsuario: idUsuario,
        nome: nome,
        usuario: usuario,
        mensagem: mensagem,
        dia: dia,
        hora: hora
    }

    $http.post("http://www.vigilantescomunitarios.com/www/php/enviaMsgChat.php", msgChat).then(function (data) {
        //console.log(data);
        $scope.disableButtonChat = false;
        pegaMsgsChat();
        $scope.mensagem = {
          chat: ""
        }

    })
}