Accessing scope property inside directive

Question

I'm calling the directive with:

<latest-survey survey="latestSurvey"></latest-survey>

The code for my directive is:

function latestSurvey(){
    return {
        restrict: 'E',
        templateUrl: 'js/modules/survey/latest.html',
        scope: {
            survey: '=survey'
        },
        link: function(scope, element, attrs){
            console.log(scope);
            console.log(scope.survey);
        }
    }
}

The console.log(scope) line outputs the scope:

Scope {$id: "007", $$childTail: null, $$childHead: null, $$prevSibling: null, $$nextSibling: null…}
$$asyncQueue: Array[0]
$$childHead: null
$$childTail: null
$$destroyed: false
$$isolateBindings: Object
$$listenerCount: Object
$$listeners: Object
$$nextSibling: 
$$childScopeClass
$$phase: null
$$postDigestQueue: Array[0]
$$prevSibling: null
$$watchers: Array[3]
$id: "007"
$parent: 
$$childScopeClass
$root: Scope
survey: Object
this: Scope
__proto__: Scope

As you can see, survey is listed there and I can navigate through it in the console to see its properties. However, the next line console.log(scope.survey) outputs:

undefined

How can I access this object inside the scope?

Answer 1

Is the survey loaded asynchronously in the controller(the latestSurvey)? One of the reasons the scope.survey is undefined may be because the request did not finish and the item is empty.

I suggest you try to set $scope.latestSurvey with some dummy data and see if the issue is still present.