title: Angular Kendo tabStrip - dynamic content and auto-select first tab
body: <p>Using the Kendo UI tabStrip widget, I'd like to do two things:</p>
  
  <p>1) auto-select the first tab, as it does not show the tab content right away.</p>
  
  <p>2) Swap out the contentUrl of the first tab, under a specific condition of course.</p>
  
  <p>Funny thing is, when I use the k-content-urls directive on my Html, the first tabs loads up the content right away.</p>
  
  <p>ex/</p>
  
  <pre><code>&lt;div kendo-tab-strip  k-content-urls="['myTemplate.html', 'myTemplate2.html']"&gt;
  </code></pre>
  
  <p>However, I don't want to do it this way. I prefer the approach below, as in <code>k-options="settings.tabOptions"</code></p>
  
  <p>Here are the tabOptions in my controller code, and the HTML markup below it:
  <div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code> settings.tabOptions = {
              animation: { open: { effects: "fadeIn" } },
              select: function (e) {
                  console.log("Selected: " + e.item.innerText);
                  // NOT WORKING..
                  e.sender.dataSource.options.data[0].contentUrl = "../myNewTemplate.html"
              },
              change: function (e) {
                  console.log("Changed: ");
              },
              activate: function (e) {
                  console.log("Activated: " + e.item.innerText);
              },
              show: function (e) {
                  console.log("Shown: " + e.item.innerText);
              },
              contentLoad: function (e) {
                  console.log("Content loaded in " + e.item.innerText);                
              },
              dataTextField: "title",
              dataContentUrlField: "contentUrl",
              dataSource: [{
                  title: "Formatting",
                  contentUrl: '../app/shared/include/grid-config/gad-config-grid-prop.html'
              },
              {
                  title: "Dimensions",
                  contentUrl: '../app/shared/include/grid-config/gad-config-grid-dimen.html'
              },
              {
                  title: "Risk Measures",
                  contentUrl: '../app/shared/include/grid-config/gad-config-grid-riskmeasures.html'
              }],
              error: function (e) {
                  console.log("Loading failed with " + e.xhr.statusText + " " + e.xhr.status);
              }
          };</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code> &lt;div id="Gadgettabs" kendo-tab-strip="tabstrip" k-options="settings.tabOptions"&gt;        
          &lt;ul&gt; 
              &lt;li class="k-state-active"&gt;Formatting&lt;/li&gt;
              &lt;li&gt;Dimensions&lt;/li&gt;
              &lt;li&gt;Risk Measures&lt;/li&gt;
          &lt;/ul&gt;               
      &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Again, I need to immediately show the first tab's content; and also figure out how to dynamically change out the content of the first tab.</p>
  
  <p>Thanks in advance...</p>
  
  <p>Bob</p>
  
  <p>**** UPDATE ****
  I'm trying to dynamically change the contentUrl in the <code>select:</code> event above but it's not working.</p>