title: [Angular JS]- Tabs Pane Example - Dynamic Add Tab
body: <p>I have used the example from Angular JS Homepage and modified it to meet the requirements.</p>
  
  <p>I have added the tabs info in a scope array and manipulate the data based in some conditions.</p>
  
  <p>Issues:</p>
  
  <ol>
  <li>I have attached an ng-bind on tabItem.title, so any change in the text box will update the title, but i want to limit the displaying of the title by 10 chars</li>
  <li>When i create a new tab, i want that tab to be the selected one.</li>
  <li>How can i select a tab based on some action taken (like on a click move from tab 1 to tab 2)</li>
  </ol>
  
  <p>Fiddle: <a href="http://jsfiddle.net/austinnoronha/NWwcT" rel="nofollow">http://jsfiddle.net/austinnoronha/NWwcT</a></p>
  
  <pre><code>    &lt;br/&gt;&lt;br/&gt;
      &lt;div ng-cloak ng-app="TabsApp"&gt;
      &lt;div class="container" ng-controller="TabManagerCtrl"&gt;
          &lt;span class="label label-info label-ext" ng-click="tabManager.addTab()" style="cursor:pointer"&gt;Add a Tab&lt;/span&gt;&lt;br/&gt;&lt;br/&gt;
  
          &lt;div&gt;
          &lt;div tabs&gt;
              &lt;div ng-repeat="tabInfo in tabManager.tabItems" pane title="{{ tabInfo.title }}"&gt;
              &lt;p&gt;{{ tabInfo.content }}&lt;/p&gt;
              &lt;input type="text" ng-model="tabInfo.title" ng-change="tabManager.getTitle(tabInfo)"&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;/div&gt;
  
          &lt;br/&gt;&lt;br/&gt;&lt;br/&gt;
  
      &lt;/div&gt;&lt;!-- /container --&gt;
      &lt;/div&gt; &lt;!-- /container --&gt;
      &lt;/div&gt; &lt;!-- /app --&gt;
  </code></pre>