title: Bootstrap-UI - How to use TemplateUrl for a tab view without manipulating the URL?
body: <p>I'm working on some <a href="https://angular-ui.github.io/bootstrap/#/tabs" rel="nofollow">Bootstrap-UI tabs</a>, but I can't find an instance online that uses <code>templateURL</code> without manipulating the URL of the page. Here's what I'd like to do:</p>
  
  <p>HTML</p>
  
  <pre><code>&lt;uib-tabset active="active"&gt;
      &lt;uib-tab ng-repeat="tab in model.tabs" index="$index" heading="{{tab.title}}"&gt;
          {{tab.content}}
      &lt;/uib-tab&gt;
  &lt;/uib-tabset&gt;
  </code></pre>
  
  <p>JS</p>
  
  <pre><code>model.jo = {...} // a gigantic JSON object - needs to be available in the templates.
  model.tabs = [
      {
          title: "Visualized",
          content: url('vis.html')
      },
      {
          title: "Pure JSON",
          content: url('json.html')
      }
  ]
  </code></pre>
  
  <p>Most of the stuff I found online uses <code>$routeProvider</code> &amp; <code>$locationProvider</code> to doctor up the URL in order to show different tabs, like this one: <a href="http://embed.plnkr.co/TMN3KNlS4Dv90SvbTQKJ/" rel="nofollow">http://embed.plnkr.co/TMN3KNlS4Dv90SvbTQKJ/</a>. I don't want to do that. </p>
  
  <p>Is there any way to just define the <code>templateUrl</code> like you'd do for a component?</p>
  
  <p>Also, I need my JSON Object, <code>model.jo</code>, in the html pages.</p>