title: Angular variable not updating on front-end
body: <p>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:</p>
  
  <pre><code>(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();
      }
  })();
  </code></pre>
  
  <p>The rest of the application works as expected and the <code>job.fillPending(data);</code> works with no errors and creates the table it's supposed to. I've put a break point on <code>job.pendingCount = data.Data.length;</code> and that tells me that the length is 1, but this is never reflected in the pending count, which remains at zero.</p>
  
  <p>The HTML output is: </p>
  
  <pre><code>&lt;h3&gt;Showing {{job.pendingCount}} Pending Bookings&lt;/h3&gt;
  </code></pre>
  
  <p>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 <code>&lt;main class="main" ng-controller="JobController as job"&gt;</code>)</p>