2 Way binding in angular not working with firebase

Question

I'm trying to display a list of products from my firebase database, but the 2 way binding is not working for me. The $scope.products gets updated and prints on the console but is not updated on the UI.

app.controller("productManagerController", ["$scope", function ($scope) {
    $scope.products = [];
    db.ref("products").once('value').then(function (snapshot) {
        const values = snapshot.val()
        for (key in values) {
            values[key].id = key;
            $scope.products.push(values[key])
        }
        console.log($scope.products) // Logs the values that have been taken from firebase
                                    // But doesn't update on the UI
    })
}])

Tyler · Accepted Answer · 2018-01-31 20:54:22Z

2

Just to expand on the answer by Sajeetharan, this article has a good explanation of why calling $scope.$apply() fixes the problem.

When Do You Call $apply() Manually?

If AngularJS usually wraps our code in $apply() and starts a $digest cycle, then when do you need to do call $apply() manually? Actually, AngularJS makes one thing pretty clear. It will account for only those model changes which are done inside AngularJS’ context (i.e. the code that changes models is wrapped inside $apply()). Angular’s built-in directives already do this so that any model changes you make are reflected in the view. However, if you change any model outside of the Angular context, then you need to inform Angular of the changes by calling $apply() manually. It’s like telling Angular that you are changing some models and it should fire the watchers so that your changes propagate properly.

So essentially, the db.ref(..)... call is not wrapped in an $apply since it is not within AngularJS' context, therefore, you must call it yourself.

answered Jan 31, 2018 at 20:54

Tyler

1,0491 gold badge8 silver badges20 bronze badges

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

1 Comment

ayushgp Over a year ago

Great explanation! Thanks!

Sajeetharan · Accepted Answer · 2018-01-31 19:02:26Z

2

With firebase you can always try to apply the changes manually using $scope.$apply();

 $scope.products.push(values[key])
 $scope.$apply();

answered Jan 31, 2018 at 19:02

Sajeetharan

223k65 gold badges370 silver badges409 bronze badges

4 Comments

ayushgp Over a year ago

Well it works like a charm but why do I need to apply the changes?

Sajeetharan Over a year ago

its sometimes an issue with angularjs it does not detect the changes automatically.

ayushgp Over a year ago

Oh cool. Thanks for the quick reply! Saved me a lot of time and frustration!

Tyler Over a year ago

@ayushgp It is not an issue with angularjs, it is actually very expected behavior. I added an answer with a link to an article explaining why this is expected in general, and why it was expected in your case.

Collectives™ on Stack Overflow

2 Way binding in angular not working with firebase

2 Answers 2

1 Comment

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related