Angular lazy loading in ui-bootstrap

Question

I am using Angular with Twitter Bootstrap Nav Tabs and want to be able to enable/action things based on the active tab.

This fiddle shows my basic structure: 

fiddle

What I want to do is on the Details tab, only load or process the content if the tab is activated.

At the moment there is a delay/processing overhead when the contents of the Details tab is loaded as it is quite processor intensive. It is fairly small but adds up to quite a delay when all the row of tabs are rendered in the working copy. The example only shows 3 rows but a normal page would have about 10. Since the user is unlikely to want to click on the Details tab on every row, I would like the content activated or loaded whenever the tab is selected.

Any ideas on how to implement this?

Answer 1

You can use a combination of ng-if and ng-include tags to lazy load contents

<div ng-if="option=='details'" ng-include="/details">
</div>