Display tabs using angular ui bootstrap - tabsets

Question

I am trying to create bootstrap tabs using angular ui. But the tabs content are not displayed one at a time. And the tab like buttons are not visible.

Jsfiddle is @ http://jsfiddle.net/qn8vcjwo/2/

Tabset code is,

<tabset>
  <tab heading="title one">this is tab number one</tab>
  <tab heading="title two">this is tab number two</tab>
  <tab heading="title three">this is tab number three</tab>
</tabset>

And, i am getting the error as,

Failed to instantiate module app due to:
Error: [$injector:nomod] Module 'app' is not available

Answer 1

You need to change the setting 'onLoad' under 'Framework and Extensions' to 'No wrap - in head'. This places your code into the head section instead of running it on the onLoad event. See jsfiddle docs . Angular attempts to initialize your app automatically on the DOMContentLoaded event, but your app has not yet been defined, as onLoad has not yet fired, thats why you are getting an error.

When you update that there is another issue. You've included the UI Bootstrap library, but that version does not include the default templates. Since you are not currently defining a custom template, you should include the library with the templates. Thats just a matter of using this URL instead which comes bundled with the templates:

https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.13.3/ui-bootstrap-tpls.js

Working fiddle here if needed