I have four tabs, currently i am loading all the four tabs using angular material with content from REST api call.

As per the requirement i need to change like below:

1. A dropdown with tab header values will tend to load only one tab which is the selected value of dropdown(On first load)
2. Inside the loaded tab we will have links to the remaining tabs which would be loaded on click on the links inside the first loaded tab

Currently i am loading all the tabs and while hiding the tabs; i am getting below error like data for the 4 other grids are undefined

It is stucking on debugging the code on $scope.gridApi.grid.options.totalItems = res.data.numFound; post getting the external paginated data from backend.

How can we achieve the loading of tabs dynamically and also when it is loaded can be reused if moved from any of the loaded tabs links inside?

Appreciate your help!