view is not updating after change in scope variable angular js

Question

This is my code to get the data from server.

sampleApp.controller('OfferController', function ($scope, $state) {

    var offersRef = firebase.database().ref('offers');
    $scope.offers = [];

    offersRef.on('value', function(snapshot) {
      $scope.offers = snapshot.val();
      //$state.go($state.current, {}, {reload: true}); 

    });
});

Initially $scope.offers = []; is empty. It is getting filled up here. $scope.offers = snapshot.val();

But view is not updating. if i click any button or anything there on the same page, or go back and come again on same page. its getting updated.

Why is not getting updated as soon as data in available? How to fix?

Sajeetharan · Accepted Answer · 2016-08-13 14:44:09Z

12

Call $scope.$apply(); after setting the value to update the binding after setting the value.

$scope.offers = snapshot.val();
$scope.$apply();

edited Aug 13, 2016 at 14:44

answered Aug 13, 2016 at 14:38

Sajeetharan

223k65 gold badges370 silver badges409 bronze badges

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

4 Comments

Devesh Agrawal Over a year ago

Thanks a lot for quick response. Its working fine. But what if $scope is not available? For example in Service also some place i am fetching the data like this? How to use $scope.$apply(); there??

Sajeetharan Over a year ago

@DeveshAgrawal you should use $scope vaiable if you are binding it to a view! , in sevices you must be using local vaiables and assigning to them

Devesh Agrawal Over a year ago

Not Actually. in service i am assigning like this. ProductService.Products = snapshot.val(); and in controller i am using same reference variable. like this:: this.ProductService = ProductService;

Sajeetharan Over a year ago

how do you bind that to a view without a scope variable? btw mark its as an answer if it has helped you

timiTao · Accepted Answer · 2018-03-14 11:39:40Z

-1

If you use any third party code which is not in the scope of angular then it will not get updated, so you have to explicitly call $apply() method of angular. Angular monitors every time for changes to update view and it looks like snapshot.val() is not in the scope of angular so it is not getting updated on view.

You can go to this link:

https://docs.angularjs.org/api/ng/type/$rootScope.Scope

edited Mar 14, 2018 at 11:39

timiTao

1,4113 gold badges22 silver badges36 bronze badges

answered Mar 14, 2018 at 9:24

Manoj

152 bronze badges

1 Comment

user1741851 Over a year ago

This does not contribute much to previous answer. You can add it as an edit to existing answer instead.

Collectives™ on Stack Overflow

view is not updating after change in scope variable angular js

2 Answers 2

4 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related