title: Bootstrap UI : Auto Tab Move with Time
body: <p>I have a AnguleJS Bootstrp UI Horizontal Tab structure. </p>
  
  <p><img src="https://i.stack.imgur.com/QEoOi.png" alt="enter image description here"></p>
  
  <p>Once I click on Tab 2 the contents of Tab 2 displays and same for Tab 3.</p>
  
  <p>My question is:</p>
  
  <p>I want to implement in a way that after 3000 ms the Tab 2 auto display &amp; after that Tab 3 without click on Tabs. and Once I click any particular Tab It Stops and display the content of that Tab.</p>
  
  <p>Here is the Demo for Horizontal Tab view (Onclick): <a href="http://plnkr.co/edit/W02ucOBG6jZScepuDE9t?p=preview" rel="nofollow noreferrer">Plunker Demo</a></p>
  
  <pre><code>&lt;!doctype html&gt;
  &lt;html ng-app="plunker"&gt;
    &lt;head&gt;
      &lt;script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.8/angular.js"&gt;&lt;/script&gt;
      &lt;script src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.10.0.js"&gt;&lt;/script&gt;
      &lt;script src="example.js"&gt;&lt;/script&gt;
      &lt;link href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet"&gt;
    &lt;/head&gt;
    &lt;body&gt;
  
  &lt;div ng-controller="TabsDemoCtrl"&gt;
  
    &lt;tabset&gt;
  
      &lt;tab ng-repeat="tab in tabs" heading="{{tab.title}}"&gt;
        {{tab.content}}
      &lt;/tab&gt;
  
    &lt;/tabset&gt;
  
  
  &lt;/div&gt;
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>