View is not updating in AngularJS

Question

In my app, i am calculating total bill and displaying on my view. First time its work fine. But when I increment the $scope.bill_total it is not updating the view. But in console it is changing. I have tried $scope.$apply(). But it is throwing error.what are the reasons of view not get updating in general case Can anyone explain it?

HTML

 <div id="total" class="col col-30 cart-item text-right text-black">
            Bill Total<br/> ${{ bill_total }}
        </div>
<button class="button button-small button-light"  ng-click="increment()"> +</button>

JavaScript:

$scope.calculate = function () {
    $scope.bill_total = parseFloat($scope.gross_bill) + parseFloat($scope.taxes) + parseFloat($scope.tips);
}

$scope.calculate();

$scope.increment = function () {
    $scope.gross_bill++;
    $scope.calculate();
    console.log($scope.bill_total )
}

is it the fact you are missing a semicolon as Kalhano mentioned? — Wayne Ellery, Dec 30 '14 at 06:33
how do you call `$scope.increment`? by DOM event or `ng-click` or programmatically — hjl, Dec 30 '14 at 06:34
@Kalhano Toress Pamuditha what are the reasons of view not get updating in general case. — ng_developer, Dec 30 '14 at 06:46
@ng_developer, view not get updating is usually due to binding change out of angular watch cycle, but that's seems not the case here. it's better to create a fiddle or plnkr to show your case. — hjl, Dec 30 '14 at 06:50
It's working in my plunkr where I just copied your code: http://plnkr.co/edit/5u7fcBPxVU0HRhhodh04?p=preview. Can you please check what's the difference in your code? — Wayne Ellery, Dec 30 '14 at 07:01
Actually my code is too big and some of the value I ma getting from other controllers. So it is difficult to build plunker — ng_developer, Dec 30 '14 at 07:05
@Wayne Ellery . your plunker is working. But why I ma facing problem It is crazy.. — ng_developer, Dec 30 '14 at 07:09
Make sure the button is within the same controller where you define `increment`. — dfsq, Dec 30 '14 at 07:13
i know this might not be an answer, but to test the scope thing, could you pls put your increment logic in a `setTimout` and do `$scope.$apply()` manually to see if the view changes? — hjl, Dec 30 '14 at 07:26

score 1 · Answer 1 · edited May 23 '17 at 12:28

1

Need to see more of your code, but why are you updating gross_bill when you are expecting bill_total to change?

If you aren't using gross_bill in your template, it won't be watched and hence changing it's value won't redraw the view.

So, modify things that are bound in your template. If there's some reason I'm wrong and you need to do scope.apply, and maybe that's the case, try wrapping your code in a $timeout which will trigger a digest, is the 'recommended' solution preferred to calling apply directly.

notes on apply vs timeout

edited May 23 '17 at 12:28

Community

1
1

answered Dec 30 '14 at 07:10

Peter Ashwell

4,292
2
18
22

Thank you for answer. I must follow it. – ng_developer Dec 30 '14 at 07:20

hjl · Answer 2 · 2014-12-30T07:56:09.023

1

as we can only see part of your source code, it looks all good. to test if everyting is in the same digest scope, you can manually do an async apply:

$scope.increment = function () {
    setTimeout(function () {
        $scope.gross_bill++;
        $scope.calculate();
        $scope.$apply();
        console.log($scope.bill_total );
    });
}

and pls also double check below points:

if bill_total is one-time binding {{ ::bill_total }}
if the directive scope is isolated with one-way binding bill_total

edited Dec 30 '14 at 07:56

answered Dec 30 '14 at 07:35

hjl

2,794
3
18
26

@ng_developer, is this part of code in a directive? – hjl Dec 30 '14 at 07:45
N0.. all code are in same controller. And I ma getting the update value in console when i increment the value. – ng_developer Dec 30 '14 at 07:47
weird, really cannot tell more base on the snippet, sorry. – hjl Dec 30 '14 at 07:55

score -1 · Answer 3 · answered Dec 30 '14 at 06:52

The problem is probably that $scope.bill_total is not an object and therefore cannot be watched. You need to change it to something like $scope.bill_total = {value: 3}. Then when you update the value it should be updated correctly in your view. There should be no reason to call $scope.apply since you are within a digest cycle already.

Make sure to change your html to :

<div id="total" class="col col-30 cart-item text-right text-black">
  Bill Total<br/> ${{ bill_total.value }}
</div>

i don's see this is the root cause, angular can watch on primitive type — hjl, Dec 30 '14 at 07:05

View is not updating in AngularJS

3 Answers3