title: Dynamically switch all tabs using radio buttons
body: <p>I have an html page with multiple tabs of same format throughout the page just as in <a href="http://angular-ui.github.io/bootstrap/" rel="nofollow">angular-ui</a> page itself, where there are <code>Markup</code> and <code>Javascript</code> tabs in each section.</p>
  
  <p>For the purpose of my question, say all the tabs in my page are also called either <code>Markup</code> or <code>Javascript</code>. I want to have two radio buttons on the top of my page which will switch <strong>all</strong> the tabs throughout the page to either <code>Markup</code> or <code>Javascript</code> depending on which radio button is selected.</p>
  
  <p>I am using <a href="http://angular-ui.github.io/bootstrap/#/tabs" rel="nofollow">ui.bootrap.tabs</a> but all the tabs are static, sort of like:</p>
  
  <pre><code>&lt;tabset&gt;
      &lt;tab heading="Markup"&gt;content for 1st markup tab&lt;/tab&gt;
      &lt;tab heading="Javascript"&gt;content for 1st javascript tab&lt;/tab&gt;
  &lt;/tabset&gt;
  .
  .
  .
  &lt;tabset&gt;
      &lt;tab heading="Markup"&gt;content for 2nd markup tab&lt;/tab&gt;
      &lt;tab heading="Javascript"&gt;content for 2nd javascript tab&lt;/tab&gt;
  &lt;/tabset&gt;
  </code></pre>
  
  <p>and the radio buttons are also from the same source:</p>
  
  <pre><code>&lt;div class="btn-group"&gt;
      &lt;button type="button" class="btn btn-primary" ng-model="radioModel" btn-radio="'markup'"&gt;markup&lt;/button&gt;
      &lt;button type="button" class="btn btn-primary" ng-model="radioModel" btn-radio="'javascript'"&gt;javascript&lt;/button&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>So far my efforts have failed. Any help will be appreciated.</p>