Angular variable not updating on front-end

Question

I have an application in angularjs, it runs with no errors but there's just one particular variable passed to the front-end that is not updating. I've declared, populated and initiated it in the controller, but it still sits at zero:

(function () {
 "use strict";
 angular.module("HtJobPortal").controller("JobController", JobController);

    JobController.$inject = ["$scope", "$rootScope"];

    function JobController($scope, $rootScope){      
        var job = this;
        job.global = $rootScope;
        job.pendingCount = 0;
        job.penStr = "http://...";

        job.getPending = function () {
            $.ajax({
                method: "GET",
                crossDomain: true,
                url: job.penStr,
                dataType: "json",
                success: function (data) {
                    job.fillPending(data);
                    job.pendingCount = data.Data.length;
                }
            });
        }

        // Initialise pending and set roles
        job.init = function () {
            job.getPending();
        }
    };
    job.init();
    }
})();

The rest of the application works as expected and the job.fillPending(data); works with no errors and creates the table it's supposed to. I've put a break point on job.pendingCount = data.Data.length; and that tells me that the length is 1, but this is never reflected in the pending count, which remains at zero.

The HTML output is:

<h3>Showing {{job.pendingCount}} Pending Bookings</h3>

This does change if the initial creation variable at the start of the controller is changed. (EDIT: The reason 'job' proceeds the count, is because the controller has an alias when attached to the template <main class="main" ng-controller="JobController as job">)

Could you provide the html? My suspicion is that it's not properly bound, in the html {{}} refers to items on $scope and $scope !== this — Patrick Barr
– Patrick Barr, Commented Jul 3, 2017 at 15:26
use $http service instead of $.ajax and recommend to do read up on Thinking in AngularJS” if I have a jQuery background? — Pankaj Parkar
– Pankaj Parkar, Commented Jul 3, 2017 at 15:27
Possible duplicate of 'this' vs $scope in AngularJS controllers — Patrick Barr
– Patrick Barr, Commented Jul 3, 2017 at 15:28

Himanshu Upadhyay · Accepted Answer · 2017-07-03 15:28:19Z

1

Event handlers are called "outside" Angular, so even if your $scope properties will be changed, the view part will not be updated because Angular doesn't know about these changes.

Call $scope.$apply() after your event handler. This will cause a digest cycle to run, and Angular will notice the changes you made to the $scope and update the view.

answered Jul 3, 2017 at 15:28

Himanshu Upadhyay

6,5571 gold badge23 silver badges34 bronze badges

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

8 Comments

Web Develop Wolf Over a year ago

Adding that call to the end of the init (so after the getPending call) stops it from displaying completely

Patrick Barr Over a year ago

Alternatively $http is an option (it's also recommended)

random_user_name Over a year ago

While technically accurate, it misses an important opportunity: to teach. Your answer fails to discuss the "Angular Way" of solving this, which is to not use jQuery, but instead use the built-in Angular tools ($http).

Web Develop Wolf Over a year ago

Using the $http call means that I'll lose my cross domain attribute

Web Develop Wolf Over a year ago

Taking $scope.$apply() out of the init and placing it directly after the assignment fixed the issue.

|

Collectives™ on Stack Overflow

Angular variable not updating on front-end

1 Answer 1

8 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

8 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related