TypeError: $scope.messages.push is not a function

Question

I am working on a chat integration in my Ionic app with Firebase and I try to display the message that :

1. are sent
2. are from previous time

So far I have no problem retrieving the previous messages they display nicely, or I have no problem submitting new messages.

HOWEVER I can't figure out a way of doing BOTH functions at the same time.

If I use the following codes, I have this error :

TypeError: $scope.messages.push is not a function

Any idea ?

Here is the code I have as my controller :

.controller('Messages',['$scope', '$ionicScrollDelegate', '$timeout', '$firebaseArray', 'CONFIG', '$document', '$state', function($scope,  $ionicScrollDelegate, $timeout, $firebaseArray, CONFIG, $document, $state) {
  $scope.hideTime = false;
  var myId = firebase.auth().currentUser.uid;
  var otherId = "0LhBcBkECAXn6v12lA2rlPIsQNs2";
  var discussion = myId + otherId;

  var isIOS = ionic.Platform.isWebView() && ionic.Platform.isIOS();

  //Recieve messages
  var ref = firebase.database().ref('/messages/' + discussion);
  ref.orderByChild("timestamp").on("value", function(snapshot1) {
    console.log(snapshot1.val() + "HEY");
    $scope.messages = snapshot1.val();

  })

  //Send messages
  $timeout(function(){
    $scope.sendMessage = function() {

      var d = new Date();
      var g = new Date();
      d = d.toLocaleTimeString().replace(/:\d+ /, ' ');
      g = g.toLocaleTimeString().replace(/:\d+ /, ' ') + new Date();



      $scope.messages.push({
        userId: myId,
        text: $scope.data.message,
        time: d
      });

      $scope.sendMessages = firebase.database().ref('/messages/' + discussion).push({
        userId: myId,
        text: $scope.data.message,
        time: d,
        timestamp: g
      });

      console.log($scope.messages);

      delete $scope.data.message;
      $ionicScrollDelegate.scrollBottom(true);

    };

    $scope.inputUp = function() {
      if (isIOS) $scope.data.keyboardHeight = 216;
      $timeout(function() {
        $ionicScrollDelegate.scrollBottom(true);
      }, 300);

    };

    $scope.inputDown = function() {
      if (isIOS) $scope.data.keyboardHeight = 0;
      $ionicScrollDelegate.resize();
    };

    $scope.closeKeyboard = function() {
      // cordova.plugins.Keyboard.close();
    };
    $scope.data = {};
    $scope.myId = myId;
    $scope.messages = [];



  })

}]);

And here is the code for my HTML :

<ion-view view-title="Chat Detail">
<ion-content class="padding" start-y="430">
    <!-- *messages / content messages -->
    <ol  class="messages">
        <!-- *self / container self messages -->
        <li ng-repeat="message in messages" ng-class="{other: message.userId != myId}" class="self">
            <!-- *avatar / avatar image -->
            <div class="avatar">
                <img src="img/82.jpg">
            </div>
            <!-- *msg / messages -->
            <div class="msg">
                <p>{{ message.text }}</p>
                <time>
                    <i class="icon ion-ios-clock-outline"></i>
                    {{message.time}}
                </time>
            </div>
        </li>
    </ol>
</ion-content>
<!-- *bar-detail / color bar and input -->
<ion-footer-bar keyboard-attach class="item-input-inset bar-detail">
    <label class="item-input-wrapper">
    <input type="text" placeholder="Type your message" on-return="sendMessage(); closeKeyboard()" ng-model="data.message" on-focus="inputUp()" on-blur="inputDown()" />
    </label>
    <a class="button button-icon icon ion-arrow-return-left" ng-click="sendMessage()" ></a>
</ion-footer-bar>

Thank you for your advice and comments in advance !

Answer 1

Solution found after 19h, so ridiculous :

I had to get rid of that part of the code.

$scope.messages.push({
        userId: myId,
        text: $scope.data.message,
        time: d
      });

and make sure the value to retrieve messages was on "on" instead of "once" in order to act with the realtime database of Firebase.