Tab-View with Angular JS

by Rajdeep Chandra

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<script type="text/ng-template" id="home.html">
<ul class="testloopul"><li class="testloop" ng-repeat="test in tests">
<a href="{{test.src}}">{{test.name}}</a>
</li></ul>
</script>
<script type="text/ng-template" id="about.html">
  About Page
</script>
<script type="text/ng-template" id="contact.html">
  Contact Page
</script>

  <div class="container" ng-controller="tabController">
    <ul class="nav nav-tabs">
      <li role="presentation" class="active"><a href="#/home">Most Popular Tests</a></li>
      <li><a href="#/about">Categories</a></li>
      <li><a href="#/contact">All Tests</a></li>
    </ul>
      <ng-view></ng-view>
  </div>

CSS

.testloopul{list-style-type:none;}
.testloop{float:left;margin-left:10px}

JavaScript

var app = angular.module('tabApp', []);
app.config( function ( $routeProvider ) {
  $routeProvider
    .when('/home', {
      templateUrl: 'home.html'
    })
    .when('/about', {
      templateUrl: 'about.html'
    })
    .when('/contact', {
      templateUrl: 'contact.html'
    })
    .otherwise({
      redirectTo: '/home'
    });
});
app.controller('tabController', function($scope) {
	$scope.tests=[{ name:'Artritis',src:"www.facebook.com", 		
  },
  {name:'Artritis',src:"www.facebook.com"},
  {name:'Artritis',src:"www.facebook.com"},
  {name:'Artritis',src:"www.facebook.com"}
  
  ];

});