Reload ionic ng-repeat list when a new item received in angularJS service
angularjs, angularjs-ng-repeat, ionic-framework
Solution
What I had to do in the end was change this part:
var jsDate = new Date();
to this:
var jsDate = new Date().getTime();
According to one of the angularJS guys, getTime() returns a number which works better when using orderBy/sorting.
Hope this helps someone else in future!
Problem
I have this html (snippet to see `ng-repeat`): ``` <ion-list show-delete="data.showDelete" id="deleteme"> <div class="list list-inset searchlist" > <label for="searchText" class="item item-input searchlabel" > <i class="icon ion-search placeholder-icon"></i> <input type='text' ng-model='searchText' placeholder="Search"/> </label> </div> <ion-item class="item-icon-left item-icon-right" ng-repeat="message in messageList | orderBy:'date':true | filter:searchText track by $id($index)" ng-click="openMessage(message.id)" > <i class="icon ion-record" style="color:#8EBF3F;font-size:15px;height:70%" ng-show='message.mesgRead == false'></i> <i class="" ng-show='message.mesgRead == true'></i> <h2 class="messagecontent" >{{message.mesgContent}} </h2> <p class="messagedate">{{message.displayDate}} </p> <i class="icon ion-chevron-right icon-accessory"></i> <ion-option-button class="button-assertive" style="line-height:73px;" ng-click="deleteMessage(message)"> Delete </ion-option-button> </ion-item> </ion-list> ``` This is the controller (snippet of code): ``` .controller('MessagesCtrl', function($scope, MessagesService, $timeout, ProfileService, $window, $filter, $sce, $ionicLoading, $ionicPopup) { $scope.messageList = ""; console.log("check for messages..."); MessagesService.loadFromMessageDB().then(function (dbMessages) { $scope.messageList = dbMessages; }); ``` So that works well and my `ng-repeat` is populated. I am using PushPlugin, so when I receive a Push Notification this callback that sits inside my `MessagesService` is triggered: ``` onNotificationResponse: function(sender, message, msgId, msgType, msgUrl) { console.log("myApp.onNotificationResponse:" + message + " msgUrl:" + msgUrl); var nowDate = new Date().getTime(); nowDate = moment(nowDate).format("ddd, Do MMM, H:mm"); var jsDate = new Date(); var tmpMessage = new myApp.Message(msgId, nowDate, msgType, sender, jsDate, message, msgUrl, false); messages.unshift(tmpMessage); messageDB.save(tmpMessage); }, ``` My problem is I don't know how to refresh my `ng-repeat` list. I have tried adding `$rootScope.$apply();` to the `onNotificationResponse` function but that did nothing. So how do I add this new message to my `ng-repeat` list? UPDATE: By adding this to the onNotificationResponse function: ``` $rootScope.$broadcast('newMessage', messages); ``` And then this to the controller: ``` $scope.$on('newMessage', function(event, messages) { console.log("WOW, a new message!!! "); $scope.messageList = messages; $scope.$apply(); }); ``` That works! However - this adds my new message to the bottom of the ng-repeat list. How can I add the message to the top?