I have been told to incorporate AngularJS's component into my app. Before using components, I had two controllers, patentList and patentItem. When a user clicked on an item from the patent list, it would load more details on that specific patent item.

Now I have included the controllers in the components, data is failing to populate the patent item table. This is down to (I think) that the patent item is a child of patent list and I was able to access the parents data.

When I log the selected item, it shows with all properties and values.

My question is, how do I access the data of parent controller now I have used components? Any help would be greatly appreciated

list-patents

<tr ng-repeat="x in $ctrl.patents">
    <td ng-click="$ctrl.select(x)"><a ui-sref="patents.list.item({id: x.id})">{{x.applicationNumber}}</a></td>
    <td ng-bind="x.clientRef"></td>
    <td ng-bind="x.currentRenewalCost">$</td>
    <td ng-bind="x.costBandEndDate"></td>
    <td ng-bind="x.renewalCostNextStage"></td>
    <td ng-bind="x.renewalDueDate"></td>
</tr>

patent-item

<tr ng-repeat="x in $ctrl.patentItem">
    <td><input type="text" ng-model="x.patentApplicationNumber"></td>
    <td><input type="text" ng-model="x.clientRef"></td>
    <td><input type="text" ng-model="x.renewalStatus"></td>
    <td><input type="text" ng-model="x.costBandEndDate"></td>
    <td><input type="text" ng-model="x.renewalCostNextStage"></td>
    <td><input type="text" ng-model="x.renewalDueDate"></td>
</tr>

app.js

var app = angular.module('myApp', ['ngRoute', 'ui.router']);

app.config(function($stateProvider, $locationProvider, $urlRouterProvider, localStorageServiceProvider) {

    app.component('patentList', {
        scope: {},
        templateUrl: "templates/patents/list/list-patents.htm",
        controller: function(loadPatentsService, loadPatentItemService) {

            var vm = this;

            vm.select = function(item) { 
               vm.patentItem = loadPatentItemService.select(item);
               console.log(item)
            }
        }
    })
});

app.component('patent', {
    scope: {},
    templateUrl: "templates/patents/list/patent-item.htm",  
    controller: function(patentTabService, loadPatentItemService) {

        var vm = this;

       //LOAD OF CODE FOR A TAB PANEL

    }
})

app.factory('loadPatentItemService', function() {

    var factory = {};

        factory.select = function(item) {
            factory.storeSelect = [];
            selectedItem = item; 
            factory.storeSelect.push(selectedItem)
            return [selectedItem];
        }      

    return factory;

})

app.factory('patentTabService', function() {

    var factory = {};

        //CODE RELATED TO THE TAB PANEL

    return factory;

});