AngularJS 1.x - $scope inspections shows $scope.data but direct access to $scope.data == undefined

Question

I am watching $scope.taskId and then trying to access a property on $scope.data.

Here's my function:

$scope.$watch('taskId', function(value) {
    console.log('here---------------');
    console.log($scope, $scope.data);
    var titlePrefix = undefined;
    if (value) {
        titlePrefix = $scope.getTaskTitlePrefix();
        Page.setTitle(titlePrefix + $scope.taskId);
        $scope.loadData();
    }
});

I am logging $scope and $scope.data above in line 3.

(console.log($scope, $scope.data);)

Here's the output in the console:

here---------------

m {$$childTail: m, $$childHead: b, $$nextSibling: m, $$watchers: Array(81), $$listeners: Object…}

undefined

Any ideas why $scope seems to be ready and available but its variables are not??

This is the HTML where the taskId variable is initialised and as you can see there is a whole lot going on here. This is a major Laravel and Angular application with more than 2700 pages without including vendor or node folders (1700+ Laravel, 1000+ angular)

<div ng-controller="TasksCtrl" ng-init="taskId = '{!! $task->id !!}'" ng-cloak>
    <span ng-init="severities = {{ json_encode($severities) }}"></span>
    <span ng-init="statuses = {{ $statuses }}"></span>
    <span ng-init="users = {{ $users }}"></span>
    <span ng-init="subtypes = {{ App\Modules\Bookings\TaskSubtype::support()->get() }}"></span>
    <span ng-init="standard_prices = {{ StandardPrice::all() }}"></span>
    <span ng-init="shelf_types = {{ json_encode(App\Modules\Bookings\Task::getShelfTypes()) }}"></span>

That is an excerpt from tasks.blade.php file which is the content section of the page.

The actual title is used in layouts.blade.php and it actually sets the title of the browser tab and NOT the title of any "on page" heading.

>head<

>meta charset="utf-8"<
>meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"<

<title ng-controller="TitleController" ng-cloak>{[{ Page.getTitle() }]}</title>

This is the getTitle function that is called into play when the taskId changes.

archDB.factory('Page', function () {
    var title = 'Seraph';
    return {
        getTitle: function() { return title; },
        setTitle: function(newTitle) { title = newTitle; }
    };
});

And here's the $scope.data variable part of the $scope inspection from the browser console to give a sense of scale.

data: m $promise : d $resolved : true alarm_date : null antivirus_state : null assigned_to : 104 attended_time : 0 auto_booked : 1 booking_fee : null booking_fee_id : null builds : Array(0) cancelled_reason : null client : Object client_id : 53 client_type : "client" collected_at : null completed : 0 completed_at : null created_at : "2016-12-07 11:23:03" created_by : 16 creator : Object customer_notifications : Array(0) deleted_at : null delivered : 0 delivered_by : null devices : Array(0) direct_dial : null due_date : null exchange_id : null feedback : null followup_id : null formatedAttendedTime : "" formatedUnattendedTime : "" id : 84222 invoice_number : null invoiced : 0 invoiced_at : null invoiced_by_project : 0 labour : 0 modifier : Object needs_calling : 0 needs_delivery : null no_price_reason : null nopassword_reason : null onsite_end : "0000-00-00 00:00:00" onsite_start : "0000-00-00 00:00:00" order_task_id : null paid : 0 paid_at : "2016-12-07" parts : Array(0) parts_total : 0 passed_qa : null passwords : Array(0) pin : null points : 0 prebook : 0 prebook_date : "01-01-1970" problem : " removed" project_id : null qa_id : null qa_tasks : Array(0) related_tasks : Array(0) return_id : null revision_history : Array(0) satisfied_client : null seraph_id : null severity_id : 2 shelf : null shelf_type : null site : Object site_id : 53 site_user : Object site_user_id : 535 standard_price : null standard_price_id : null status : Object status_id : 1 subscribed_user : Array(0) subscribers : Array(0) subtype_id : 1 template_items : Array(0) templates : Array(0) time_spent : 0 title : "For Nadeem" type : "support" unattended_time : 0 updated_at : "2016-12-07 11:24:04" updated_by : 94 user : Object

---------------- edit 00.14 -----------------

Here's a loadData function that makes an ajax call to the laravel api and the response gets assigned to $scope.data there

$scope.loadData = function() {
    Tasks.get({taskId: $scope.taskId}, function(response){
        $scope.data = response;
        $scope.modified = false;
        CustomerNotificationsService.setNotifications(response.customer_notifications);
        $ClientsManager.setClient(response.client);
        $ClientsManager.setClientType(response.client_type);
        $scope.registerWatchers();
    }, ErrorsHandler);
};

Answer 1

Simple fix actually;

Simply watched the data property I was interested in, in new $watch and pulled the call to Page.setTitle in to it.

$scope.$watch('taskId', function(value) {
    if (value) {
        $scope.loadData();
    }
});

// set browser tab title prefix
$scope.$watch('data.type', function(value) {
    var browserTabTitlePrefix = undefined;
    if(typeof value != 'undefined') {
        browserTabTitlePrefix = $scope.getBrowserTabTitlePrefix(value);
        Page.setTitle(browserTabTitlePrefix + $scope.taskId);
    }
});

Now because I'm watching the right property and only calling the sub-function (Page.setTitle) once it is ready I'm golden.

Alhamdulillaah katheerun