$scope array not getting updated

Question

Inside a controller I have this code:

$rootScope.$on('chat_contact', function(event, data) {          
            var message = data.message;
            if(data.key === 'IM_MSG') {
                console.log("chat_contact.........");
                var contact = $scope.contacts[message.sndrId];
                if(contact) {
                    contact.lastMsg = message.text;
                    contact.sndrName = message.sndrName;
                } else {
                    $scope.contacts[7] = {
                        'lastMsg': message.text,
                        'sndrName': message.sndrName 
                    }
                }
            }
        });

Here is my html code:

    <li class="item item-avatar item-icon-left1 item-icon-right" ng-repeat="(id, contact) in contacts" ui-sref="app.chat-single" on-hold="moreOptions('{{id}}')">
      <img src="venkman.jpg">
      <h2>{{contact.sndrName}}</h2>
      <p><span class='margin-l-10'>{{contact.lastMsg}}</span></p>

Problem is

$scope.contacts[7] = {
  'lastMsg': message.text,
  'sndrName': message.sndrName 
}

is adding a new enter to contacts but its not getting render in html

Where are you adding?\

Sajeetharan
– Sajeetharan

2016-08-23 02:30:40 +00:00
Commented Aug 23, 2016 at 2:30 — Sajeetharan
– Sajeetharan, Commented Aug 23, 2016 at 2:30
inside a controller

Manish Kumar
– Manish Kumar

2016-08-23 04:49:22 +00:00
Commented Aug 23, 2016 at 4:49 — Manish Kumar
– Manish Kumar, Commented Aug 23, 2016 at 4:49

Akash Agrawal · Accepted Answer · 2016-08-23 03:44:38Z

2

Can you try adding $apply() ?

I was facing the same problem and it resolved mine.

$scope.$apply(function(){
    $scope.contacts[7] = {
    'lastMsg': message.text,
    'sndrName': message.sndrName 
    }
});

I'm not sure if it's correct but you can give it a try.

answered Aug 23, 2016 at 3:44

Akash Agrawal

2,2991 gold badge21 silver badges41 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Manish Kumar Over a year ago

But why its happening like that simply adding to $scope should update the data

gyc Over a year ago

@manish usually if you change data inside an event you need to $apply()

Akash Agrawal Over a year ago

adding to what @gyc stated, $apply evaluates an expression and triggers a digest cycle, making Angular execute all registered watch listeners and update any view bindings.

Manish Kumar Over a year ago

@gyc we can add any data to $scope under a click to other event correct & it generally reflect the changes

gyc Over a year ago

@manish yes, the ngClick directive includes $apply() in source code

|

Jenson Raby · Accepted Answer · 2016-08-23 04:58:55Z

use $scope.$apply(); after the loop execution

$rootScope.$on('chat_contact', function(event, data) {          
        var message = data.message;
        if(data.key === 'IM_MSG') {
            console.log("chat_contact.........");
            var contact = $scope.contacts[message.sndrId];
            if(contact) {
                contact.lastMsg = message.text;
                contact.sndrName = message.sndrName;
            } else {
                $scope.contacts[7] = {
                    'lastMsg': message.text,
                    'sndrName': message.sndrName 
                }
            $scope.$apply();
            }
        }
    });

Collectives™ on Stack Overflow

$scope array not getting updated

2 Answers 2

6 Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

Comments

Related