Auto scroll to bottom with ng-repeat in Ionic

Question

I have a problem that become a realy nightmare. I build a mobile chat app with Ionic, Angular and Firebase. The message exchange works well, but i have problem with auto scroll do bottom when received new messages, i try use $ionicScrollDelegate, scroll-glue Directive, Jquery function and nothing works.

Page chat

            <div ng-controller="ChatController as chatCtrl" id="chats_page" class="upage-content vertical-col left hidden has-subheader">
                        <div class="bar bar-subheader subheader-chat">
                          <h2 class="title">{{chatCtrl.status}}</h2>
                        </div>
                <div class="" data-uib="layout/row" data-ver="0"  id="chatBox">


                            <ion-content id="autoscroll" class="widget uib_w_92 d-margins topbar" data-uib="ionic/list" data-ver="0" delegate-handle="mainScroll">
                                <ion-list scroll-glue>
                                <ion-item ng-repeat="msg in chatCtrl.messages" class="item widget uib_w_93 chat-cliente item-text-wrap" data-uib="ionic/list_item" data-ver="0" ng-class="chatCtrl.getRole(msg.role)">{{msg.text}}<a class="chat-time">{{msg.time}}</a>
                                </ion-item>
                            </ion-list>
                            </ion-content>


                </div>


                <div class="bar bar-footer footer-chat" >
                    <i class="placeholder-icon "></i>
                    <textarea type="text" name="msg" placeholder="Digite sua mensagem..." class="chat-text" ng-disabled="chatCtrl.msgText()" ng-model="myMsg" ></textarea>
                    <button class="button ion-paper-airplane btn-chat-send" ng-click="chatCtrl.sendMsg(myMsg)" ng-disabled="chatCtrl.msgText()" id='btn_send_chat'></button>
                </div>

            </div>

And piece of ChatController

angular.module('myApp')
.controller("ChatController", ['User','FireBaseApp','$firebase','$ionicLoading','$timeout','$ionicPlatform','$location','$ionicHistory','$timeout','$ionicPopup','$ionicScrollDelegate','$scope',function(User, FireBaseApp ,$firebase, $ionicLoading,$timeout,$ionicPlatform,$location,$ionicHistory,$timeout,$ionicPopup,$ionicScrollDelegate,$scope){

    var self = this;




    ... pieces of code ...


 self.sendMsg = function(msg){
          $scope.myMsg = null;

          $ionicScrollDelegate.scrollBottom();

}

Answer 1

After a year i found a solution: Separate my app in angular template and finally scrollglue works.