Unable to access scope in same controller : AngularJS

Question

Please anyone tell me what am i missing or what is the actual issue that i am facing this problem.

Here is my controller.

app.controller('UpdateLeadController', ['$scope', '$http', '$location', '$route', 'ProgramsFactory', 'CommonFactory', '$filter', 'ProcessFactory', 'Upload', '$routeParams', function($scope, $http, $location, $route, ProgramsFactory, CommonFactory, $filter, ProcessFactory, Upload, $routeParams) {
 $scope.limit = 3;
$scope.loadMore = function() {
    $scope.limit += 2;
}
$scope.programIs = 1;

ProgramsFactory.Getprogramslist(1).then(function(response) {
    $scope.programs = response.data.data;
});
CommonFactory.Getclients().then(function(response) {
    $scope.clients = response.data.data;
});
ProgramsFactory.Getmonths().then(function(response) {
    $scope.months = response.data.data;
});

ProcessFactory.Getlead($routeParams.id).then(function(response){
    $scope.lead = response.data.data; // here i've got the lead data from factory.
});
console.log($scope); // when i am printing this scope i am getting the object lead with all data.
console.log($scope.lead); // when i am trying to print this. it outputs as `Undefined`.
}]);

I stuck on this issue. all data can be accessible in HTML but not able to get them in the controller as well as in directive. a directive is also giving data as undefined.

while printing scope i can see the object. but when i am trying to access that object it showing it's undefined.

Answer 1

let's see how javascript works

first u created a scope with 3 property

* note that $scope.programs, $scope.clients, $scope.months are not defined *

$scope.limit = 3;
$scope.loadMore = function() {
    $scope.limit += 2;
}
$scope.programIs = 1;

then u call those methods in factory to fetch data, while fetching these data, the following code are executed

console.log($scope);// u got an object 
console.log($scope.lead); // u got an undefined, of course u never set it

after a few seconds, one of your request is finished let's take Getlead for example, and now the following code is executed

$scope.lead = response.data.data; 

this is the time when u get $scope.lead

but why

console.log($scope)

is showing everything after fetching data ?

Did u notice that there is an 'info' icon in console? which says the value is evaluated now... or something like that. That means when u first log $scope, it doesn't have a lead property, but when the fetching process is finished and u click and expand the log data, chrome will reevaluate the value according to its current value , so u see the $scope.lead property.