Angular controller structure for multipart view

Question

I need to create this layout in a SPA using AngularJS and a web api. The workflow goes as follows:

1. When the controller loads, two sets of data get fetched from the api (table above and table to the left - e.g. 2 calls to api/data1 and api/data2)
2. As soon as the user clicks a row in the upper table, detail information gets fetched into the box on the right side (api/data1/3434/detail)
3. When the user clicks on certain entries from the detail information box, the related entries are being highlighted in the table to the left.

I started creating a view with everything in it, also a controller that exposes properties for all necessary stuff, but now it looks like this (pseudo)

myPageController
    table1Data : Array<IData1Model>;
    table2Data : Array<IData2Model>;
    userSelectedFromTable1 : IData1Model;
    userSelectedFromTable2 : IData2Model;

I feel this isn't really good practice. Is there a way to suborganize the parts into some kind of partial views? Subcontrollers? Or is this a common approach? What does the usual controller looks like when he's going to serve for multiple kinds of data / api endpoints?

---

EDIT

I should clarify that this is just one particular page (section) of a bigger app. Most parts are just frontends for one kind of data, e.g. one controller, one model, one api call etc. Think of the page as some kind of dashboard where multiple data is shown and interact with each other.

Answer 1

is there a way to suborganize the parts into some kind of partial views? Subcontrollers?

These parts should really be directives. You would have the left view being a directive and the right view being a directive with the controller being the glue between the two directive instances.

so an overview of the controller:

myPageController
    tablesData : IData1Model[];
    userSelectedTable : IData1Model;