AngularJS refresh doesn't seem to work

Question

I got a simple 2 sections that I want to be old and new. Once new is done and socket is being invoked old = new and new should be empty. The thing is everything keeps still adding into upper (new) section. The last socket is responsible for managing this.

Controller :

.controller('DepositsCtrl', function ($scope, mySocket) {
        $scope.deposits = [];
        $scope.olddeposits = [];
        $scope.winnerSteamName = "";
        $scope.roundValue = 0;
        $scope.winnerChance = 0;
        $scope.avatarWinner = "";

        mySocket.on('sendDepositIO', function(steamIdIO, itemCountIO, depositValueIO, avatarIO, steamNameIO) {
            $scope.deposits.push({
                steamId: steamIdIO,
                itemCount: itemCountIO,
                depositValue: depositValueIO,
                avatar: avatarIO,
                steamName: steamNameIO
            })
        });

        mySocket.on('newConnection', function (depositsInRound, olddepositsInRound) {
            $scope.deposits = depositsInRound;
            $scope.olddeposits = olddepositsInRound;
        });

        mySocket.on('newRoundDeposit', function () {
            $scope.olddeposits = $scope.deposits;
            $scope.deposits = [];
        });

Html :

<div ng-controller="DepositsCtrl">
            <h2>Deposits</h2>
            <hr class="line-under">
            <section class="round section">
                <ul>
                    <li class="li-deposit" ng-repeat="deposit in deposits | orderBy:'-'">
                        <div class="deposit-person"><img class="small-avatar" ng-src="{{deposit.avatar}}" /> <span class="name">{{deposit.steamName}}</span> </div>
                        <div class="deposit-items">{{deposit.itemCount}} items</div>
                        <div class="deposit-value">{{deposit.depositValue}}$</div>
                    </li>
                    <li>
                        <hr class="line-under">
                        <h3 class="new-round text-center">New Round  <i class="fa fa-arrow-up fa-lg"></i></h3>
                    </li>
                </ul>
            </section>
            <section class="round section">
                <ul>
                    <li>
                        <div class="text-center center-block">
                            <img class="small-avatar" ng-src="{{avatarWinner}}" /><span>{{winnerSteamName}} has won {{roundValue}} with {{winnerChance}}% chance !</span>
                        </div>
                    </li>
                    <li class="li-deposit" ng-repeat="olddeposit in olddeposits | orderBy:'-'">
                        <div class="deposit-person"><img class="small-avatar" ng-src="{{olddeposit.avatar}}" /> <span class="name">{{olddeposit.steamName}}</span> </div>
                        <div class="deposit-items">{{olddeposit.itemCount}} items</div>
                        <div class="deposit-value">{{olddeposit.depositValue}}$</div>
                    </li>
                    <li>
                        <hr class="line-under">
                        <h3 class="new-round text-center">Previous Round  <i class="fa fa-arrow-up fa-lg"></i></h3>
                    </li>
                </ul>
            </section>
        </div>

Answer 1

Having looked at your code and reading the discussion with Leandro I am wondering.

Are you really sure that 'newRoundDeposit' is emitted and catched?

Sorry if this is a silly question, but for me, your coding looks correct.

Answer 2

Arrays are objects and objects are assigned by reference, so when you do $scope.olddeposits = $scope.deposits, you are assigning the reference stored in deposits to olddeposits.

Try $scope.olddeposits = angular.copy($scope.deposits); and see what happens.