DOM updated, but its view isn’t rendering?

I'm trying to make a chat application. I have a function that runs whenever I get a new msg to add the msg to the scope so it'll be rendered by ng-repeat. Function looks like this:

var gotMsg = function(message) {
    var msg = message.message;
    var name = message.name
    console.log('scope.messages', $scope.msgCtrl.messages);
    $scope.msgCtrl.messages[name].push({
        message: msg,
        user: name
    });

    $scope.$digest();
    //scroll to bottom
    $ionicScrollDelegate.scrollBottom(true);

I receive the message no problem, and from running 'ionic run android' and looking from chrome inspect, I see that the DOM is updated with the new msg correctly interpolated.

However! These new messages are not rendered properly. It's either just white, or broken. It does show up when I scroll up the chat and come back down however. What could be causing this? I've tried with/without $digest/$apply/$timeout/$eval.Async, etc. Nothing is working so far. Any thoughts?

enter image description here

I found a work around to render the messages properly. Basically needed to hide & show a DOM element that would force "movement" to the page so it would get re-rendered. I found the element HAS to cause a movement, and cannot be a hidden element. Also, it needed to have a bit of a delay. 0ms would not work.

$timeout(function() {

    var el = document.getElementsByClassName("nbsp")[0];
    el.style.display = 'none';

    $timeout(function() {
        el.style.display = 'block';
    }, 50);

}, 50);