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, Jul 03 '17 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?](https://stackoverflow.com/q/14994391/2435473) — Pankaj Parkar, Jul 03 '17 at 15:27
Possible duplicate of ['this' vs $scope in AngularJS controllers](https://stackoverflow.com/questions/11605917/this-vs-scope-in-angularjs-controllers) — Patrick Barr, Jul 03 '17 at 15:28

score 1 · Accepted Answer · answered Jul 03 '17 at 15:28

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 03 '17 at 15:28

Himanshu Upadhyay

6,558
1
20
33

Adding that call to the end of the init (so after the getPending call) stops it from displaying completely – Web Develop Wolf Jul 03 '17 at 15:30
1

Alternatively [$http](https://docs.angularjs.org/api/ng/service/$http) is an option (it's also recommended) – Patrick Barr Jul 03 '17 at 15:31
1

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). – random_user_name Jul 03 '17 at 15:33
Using the $http call means that I'll lose my cross domain attribute – Web Develop Wolf Jul 03 '17 at 15:34
$scope.$apply() seems completely unnecessary in this scenario. – Mike Feltman Jul 03 '17 at 15:42
AFAIK, enabling CORS is controlled via server. You'd probably not need it here. – Abhi Jul 03 '17 at 15:43
1

Taking $scope.$apply() out of the init and placing it directly after the assignment fixed the issue. – Web Develop Wolf Jul 03 '17 at 15:45
you should ask OP to use `$http` instead of `$.ajax`.. Agreed with @cale_b ! – Pankaj Parkar Jul 03 '17 at 15:51

Angular variable not updating on front-end

1 Answers1