AngularJS - view not updating after scope change

Question

I am working with some data via Firebase, and for some reason when the value changes on the server, the scope is getting updated in my console, however the angular view is not updating.

I've tried some different approaches including wrapping the reference to the scope in a $timeout & $apply, but still no solution. I've worked with angular many times and I've never ran into this behavior before. There's only one controller in the app.

js

app.controller('someCtrl', function($scope, $timeout){

    $scope.publishedItems =[];
    var fbRef = firebase.database().ref('stories/' + storyId + "/correspondents").orderByChild('published').equalTo(true);
    fbRef.on('value', function(snapshot) {
    //update scope

    $scope.publishedItems = snapshot.val();

    console.log($scope.publishedItems)// this logs the correct data, however the markup is not changing

});

html

 <div ng-controller="someCtrl">
      <div ng-repeat="item in publishedItems">
        {{item}}
      </div>
 </doc>

resolved

So after some debugging, it turned out I had a function running outside of the Angular app that was appending some markup to the dom which was interfering with Angulars digest cycle.

Working as expected now

can you please create codepen.io example? and $scope.$apply migh help you — Shirish Patel
– Shirish Patel, Commented Oct 26, 2017 at 12:21
@ShirishPatel I added a snippet although I didn't expose my firebase ref. — gregdevs
– gregdevs, Commented Oct 26, 2017 at 12:36
you can use $watchCollection() on the publishedItems, and it will start watching the each changes on the array. — Shirish Patel
– Shirish Patel, Commented Oct 26, 2017 at 12:52

Karim · Accepted Answer · 2017-10-26 12:21:28Z

2

Assuming snapshot.val() returns something you need to trigger a digest cycle to determine changes since firebase callback is executed outside angular

fbRef.on('value', function(snapshot) {
    $scope.$apply(function(){
      $scope.publishedItems = snapshot.val();
    })
})

answered Oct 26, 2017 at 12:21

Karim

8,6823 gold badges27 silver badges36 bronze badges

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

6 Comments

gregdevs Over a year ago

Hi, yup, I've tried that and same result. Still is not updating in the view.

Karim Over a year ago

that's wierd, you definitely need a call to $apply, try posting a link to a plunkr with the complete code

gregdevs Over a year ago

Yeh, never experienced this. Yeh Im gonna have to create a plunkr with another firebase instance.

gregdevs Over a year ago

of course I created a plunked and it worked. The only main diffferebxe between the plunkr is the data is being manipulated from another source....would that make a difference?

gregdevs Over a year ago

so I just rebooted and everything worked as expected.. weird

|

Shirish Patel · Accepted Answer · 2017-10-26 12:50:45Z

0

You can try following code

var app = angular.module('myApp', []);
app.controller('someCtrl', function ($scope, $timeout) {

    $scope.publishedItems = [];
    $scope.$watchCollection('publishedItems', function(newCol, oldCol, scope) {
        console.log(newCol, oldCol, scope);
    });
    var fbRef = firebase.database().ref('stories/' + storyId + "/correspondents").orderByChild('published').equalTo(true);
    fbRef.on('value', function (snapshot) {
        var pubItems = snapshot.val();
        //update scope

        $scope.publishedItems = pubItems;

        console.log($scope.publishedItems)// this logs the correct    data, however the markup is not changing

    });
});

edited Oct 26, 2017 at 12:50

answered Oct 26, 2017 at 12:24

Shirish Patel

8746 silver badges14 bronze badges

Comments

Neji Soltani · Accepted Answer · 2017-10-26 12:53:33Z

0

Seems like you need to update you binding , so you need to use $scope.$apply()

app.controller('someCtrl', function($scope, $timeout){

    $scope.publishedItems =[];
    var fbRef = firebase.database().ref('stories/' + storyId + "/correspondents").orderByChild('published').equalTo(true);
    fbRef.on('value', function(snapshot) {
    //update scope

    $scope.publishedItems = snapshot.val();



    console.log($scope.publishedItems)// this logs the correct data, however the markup is not changing

});
   $scope.$apply();
});

edited Oct 26, 2017 at 12:53

answered Oct 26, 2017 at 12:26

Neji Soltani

1,5114 gold badges24 silver badges43 bronze badges

4 Comments

gregdevs Over a year ago

Hi, yup, I've tried that and same result. Still is not updating in the view.

gregdevs Over a year ago

I added a snippet although i didnt expose my firebase ref.. but you can at least see where I'm having the issue.

Neji Soltani Over a year ago

@gregdevs you are missing a } at the end of your script

gregdevs Over a year ago

Thanks, fixed that..although still having this issue.

Collectives™ on Stack Overflow

AngularJS - view not updating after scope change

3 Answers 3

6 Comments

Comments

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

6 Comments

Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related