1

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 )
}
Improve this question
18
  • did u missed the semicolon in line $scope.gross_bill++; Commented Dec 30, 2014 at 6:29
  • 3
    Share a plunker with the relevant HTML and JS code.. Commented Dec 30, 2014 at 6:31
  • can you post the error thrown ? Commented Dec 30, 2014 at 6:33
  • is it the fact you are missing a semicolon as Kalhano mentioned? Commented Dec 30, 2014 at 6:33
  • 1
    It's working in my plunkr where I just copied your code: plnkr.co/edit/5u7fcBPxVU0HRhhodh04?p=preview. Can you please check what's the difference in your code? Commented Dec 30, 2014 at 7:01

3 Answers 3

Reset to default
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

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

1 Comment

Thank you for answer. I must follow it.
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
Improve this answer

3 Comments

@ng_developer, is this part of code in a directive?
N0.. all code are in same controller. And I ma getting the update value in console when i increment the value.
weird, really cannot tell more base on the snippet, sorry.
-1

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>
Improve this answer

1 Comment

i don's see this is the root cause, angular can watch on primitive type

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.