Estoy creando una aplicación de mensajería usando AngularJS. MessagesData es una matriz que contiene el tipo de mensaje y el contenido del mensaje y enviado por quién.

Cuando uso esta función funciona perfecto,

Pero cuando escribo cualquier código html en la función, el html se aplica en el cuadro de mensaje

Ejemplo :

input("<div>Hello</div>")

crea un div dentro de él, la palabra hola, pero quiero que aparezca todo el elemento en el mensaje

Esta es la función de la que estoy hablando:

 function dataToHtml(which){ //check if data = message if(messagesData[which][0]=='message'){ //check if its user message or the other one if(messagesData[which][1]=='mine'){ chatContainer.innerHTML+= ` <div class="chat-message-box"> <div class="mine-message chat-message">${messagesData[which][2]}</div> </div> ` }else if(messagesData[which][1]=='other'){ chatContainer.innerHTML+= ` <div class="chat-message-box"> <div class="other-message chat-message main-bg">${messagesData[which][2]}</div> </div> ` } } }