Angular binding to async result

Question

I have tried various ways but nothing works for me. What I have:

app.controller('someCtrl',
...

$scope.load = function () {
    client.loadAgreements().
        then(function (response) {
            $scope.unapprovedCount = response.data[StatusTypeEnum.Unapproved];
            $scope.approvedCount = response.data[StatusTypeEnum.Approved];

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

Html part:

<button text="'({{unapprovedCount}})'" ...
<button text="'({{approvedCount}})'"...

When I do:

app.controller('someCtrl',
...

$scope.unapprovedCount = 777;

$scope.load = function () {
    client.loadAgreements().
        then(function (response) {
            $scope.unapprovedCount = response.data[StatusTypeEnum.Unapproved];
            $scope.approvedCount = response.data[StatusTypeEnum.Approved];

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

I can see 777 when page renders. However I don't see any updates from promise. Variable is assigned but view is not updated. And if I add apply method then I am getting error:

Error: [$rootScope:inprog] $digest already in progress

What else can I try, as I am new to angular and don't know how to do this?

EDIT:

I am not sure if this matters but actually this button uses directive:

<button ng-fas-button-with-color-indicator text"'Approved  ({{unapprovedCount}})'" color="red" ...

And text is rendered in some div.

Sure, in debug mode I see that $scope.unapprovedCount is assigned a proper value in then part. — Giorgi Nakeuri
– Giorgi Nakeuri, Commented Jun 27, 2016 at 12:32

Silvinus · Accepted Answer · 2016-06-27 12:23:00Z

1

Remove

$scope.$apply();

from your code and check in your console the value of

response.data[StatusTypeEnum.Unapproved]

answered Jun 27, 2016 at 12:23

Silvinus

1,4459 silver badges16 bronze badges

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

3 Comments

Giorgi Nakeuri Over a year ago

When I debug I see that $scope.unapprovedCount is assigned proper number.

Silvinus Over a year ago

When load function is called ? Have you got the same issue with approvedCount ?

Giorgi Nakeuri Over a year ago

Sure, in debug mode I see that $scope.unapprovedCount is assigned a proper value in then part. If I assign this variable manually some value outside load function then it works.

Alvaro Silvino · Accepted Answer · 2016-06-27 12:26:41Z

0

Why you need the $scope.$apply()?

You have to remove it from your code.

The only need of this function is when you are using a third party lib to manipulate variable from the scope, outside of angular's watch.

When you use apply and the digest cycle is ok, nothing changed, will raise this error.

answered Jun 27, 2016 at 12:26

Alvaro Silvino

9,83314 gold badges56 silver badges81 bronze badges

2 Comments

Giorgi Nakeuri Over a year ago

I am not sure, but when I saw that my view is not updated I googled and I read that angular can not know that my variable changed when async call ended and I need to manually call digest.

Alvaro Silvino Over a year ago

@GiorgiNakeuri can you post the loadAgreements function?

Collectives™ on Stack Overflow

Angular binding to async result

2 Answers 2

3 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related