AngularJS communication between components through a template (with a promise)

Question

I'm working on an app that has actor listings. There are tags and actors with a many to many relationships on the backend.

I have 2 components and I want to pass and unresolved promise between them through a template.

This is the actor-tag-detail component:

angular.module('actorTagDetail').component('actorTagDetail', {
    templateUrl: 'static/partials/actor-tag-detail/actor-tag-detail.template.html',
    controller: ['$routeParams', 'ActorTag',
        function ActorTagDetailController($routeParams, ActorTag) {


            var self = this; 
            self.actorTag = ActorTag.get({actorTagId: $routeParams.actorTagId})

        }
    ]
});

The actorTag returns a JSON for the ActorTag object from the backend that looks like this:

{ "id": 37, "name": "Oscar Winner", "actors": [ 664, 668, 670, 673, 678, 696 ] }

I also have an actor-list component that is responsible for retrieving an actor list from the backend:

angular.module('actorList').component('actorList', {
    templateUrl: 'static/partials/actor-list/actor-list.template.html',
    bindings: {
        pk: '='
    },
    controller: ['Actor',
        function ActorListController(Actor) {
            var self = this;
            alert(self.pk)
            self.actors = Actor.query();  
            self.orderProp = 'name';
        }
    ]
});

In the template for actor-tag-details I'm trying to pass an attribute to the actor-list component.

actor-tag-detail.template.html:

<actor-list pk="$ctrl.actorTag.actors"></actor-list>

What I'm trying to achieve is to have access to the retrieved JSON data in the actor-list component. However I'm getting an 'unresolved object error' instead of the desired result when I try to alert(self.pk) in actor-list.component.This is happening because when alert(self.pk) runs, the data is not yet retrieved from the backend. I do not know how to remedy the situation. Is there a way to specify in the receiving component to await execution until the promise is resolved and the data received from the backend?

Or, am I'm doing it completely wrong and there is a better way to pass this information between components?

Answer 1

Use a watcher to listen the object changes:

function ActorListController($scope, Actor) {
    var self = this;
    $scope.$watch(function() {
        return self.pk;
    }, function(newValue, oldValue) {
        if(angular.isObject(newValue) {
            //alert(self.pk)
            self.actors = Actor.query();  
        }
    }
}