ng-repeat does not update after pushing object to a $scope array

var chat = $.connection.tDKTHub;
        chat.client.NewNotification = function (notification) {
            _notification = JSON.parse(notification);                
            $scope.Notifications.push(_notification);
            console.log($scope.Notifications);
        }

<div class="notification-container container">
            <br />
            <div class="notification row"
                 ng-class="{unread : notification.STATUS==0}"
                 ng-repeat="notification in Notifications">
                <div class="col-2">
                    <img style="width:50px;height:50px" />
                </div>
                <div class="col-10">
                    <p>{{notification.SENDER_FULLNAME}} {{notification.TYPE_ACTION}} {{notification.MESSAGE}}</p>
                </div>
            </div>

        </div>

The UI does not update even the object was pushed into the $scope array. Anyone knows what happened here? Link to image showing the object was added to the array

Upvotes: 1

Views: 79

Answers (1)

Sajeetharan
Sajeetharan

Reputation: 222522

When angular does not detect the changes in the scope variable, you can manually bind the changes by calling to $scope.$apply();

$scope.Notifications.push(_notification);
$scope.$apply();

Upvotes: 2

Related Questions