title: angular-ui-bootstrap Tabs
body: <p>Im new to ui-bootstrap. actually im trying to use some components as tabs to make a menu for my app. My solution is unfortunately not working. Who can please help. 
  Here is my code.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>angular.module('scolarite', ['ui.bootstrap', 'ui.bootstrap.demo', 'ngAnimate', 'ngTouch']);
  angular.module('ui.bootstrap.demo', ['ui.bootstrap', 'ui.bootstrap.demo', 'ngAnimate', 'ngTouch']).controller('TabsDemoCtrl', function ($scope, $window) {
      $scope.tabs = [
          {title: 'Dynamic Title 1', content: 'Dynamic content 1'},
          {title: 'Dynamic Title 2', content: 'Dynamic content 2', disabled: true}
      ];
  
      $scope.alertMe = function () {
          setTimeout(function () {
              $window.alert('You\'ve selected the alert tab!');
          });
      };
    
      $scope.model = {
          name: 'Tabs'
      };
  });</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;html ng-app="scolarite"&gt;
      &lt;head&gt;
          &lt;meta http-equiv="Content-Type" content="text/html; charset=UTF-8"&gt;
          &lt;title&gt;Accueil&lt;/title&gt;
          &lt;link href="${pageContext.request.contextPath}/css/bootstrap.css" rel="stylesheet" type="text/css"/&gt;
      &lt;link href="${pageContext.request.contextPath}/css/bootstrap.min.css" rel="stylesheet" type="text/css"/&gt;
      &lt;link href="${pageContext.request.contextPath}/css/bootstrap-theme.min.css" rel="stylesheet" type="text/css"/&gt;
          &lt;script src="${pageContext.request.contextPath}/js/angular-1.6.1.js" type="text/javascript"&gt;&lt;/script&gt;
          &lt;script src="${pageContext.request.contextPath}/js/angular-animate.js" type="text/javascript"&gt;&lt;/script&gt;
          &lt;script src="${pageContext.request.contextPath}/js/angular-animate.min.js" type="text/javascript"&gt;&lt;/script&gt;
          &lt;script src="${pageContext.request.contextPath}/js/angular-touch.js" type="text/javascript"&gt;&lt;/script&gt;
          &lt;script src="${pageContext.request.contextPath}/js/angular-touch.min.js" type="text/javascript"&gt;&lt;/script&gt;
          &lt;script src="${pageContext.request.contextPath}/js/acc.js" type="text/javascript"&gt;&lt;/script&gt;
              &lt;script src="${pageContext.request.contextPath}/js/ui-bootstrap-2.5.0.js" type="text/javascript"&gt;&lt;/script&gt;
      &lt;script src="${pageContext.request.contextPath}/js/ui-bootstrap-2.5.0.tpls.js" type="text/javascript"&gt;&lt;/script&gt;
      &lt;script src="${pageContext.request.contextPath}/js/ui-bootstrap-tpls-2.5.0.min.js" type="text/javascript"&gt;&lt;/script&gt;
      &lt;script src="${pageContext.request.contextPath}/js/ui-bootstrap-2.5.0.min.js" type="text/javascript"&gt;&lt;/script&gt;
          &lt;/head&gt;
          &lt;body ng-controller="TabsDemoCtrl"&gt;
          &lt;style type="text/css"&gt;
    form.tab-form-demo .tab-pane {
      margin: 20px 20px;
    }
  &lt;/style&gt;
        &lt;uib-tabset type="pills"&gt;
      &lt;uib-tab heading="Inscription"&gt;Tab 1 content&lt;/uib-tab&gt;
      &lt;uib-tab heading="Liste Etudiants" classes="btn-sm"&gt;Tab 2 content&lt;/uib-tab&gt;
    &lt;/uib-tabset&gt;
      &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  
  Thanks in Advance</p>