Angular: Empty Fiddle

http://angularjs.org/

HTML

<script src="http://code.angularjs.org/angular-1.0.1.js"></script>
<div ng-controller="myCtrl">
    <ul class="tablist">
        <li ng-repeat="tab in tabList"
        ng-class="{selected : isSelected(tab)}"
         ng-click="setSelected($index);setSelectedTab(tab);">

            <a   href="javascript: void(0);">{{tab.title}}</a>
    
            
        </li>
    </ul>
    
    <br />
    
    <ul class="tablist">
        <li id="selectedTab"><a href="javascript: void(0);">Admin</a></li>
    </ul>
    
    <br />Selected: {{selected}}
    <br />Previous: {{previous}}
</div>

CSS

.tablist {
    list-style: none;
    height: 35px;
    padding: 0px;
    margin: 0px;
    border: none;
}

.selected{
      
 
}
.selected a{
      
  
    
    
    background: none !important;
   
    background-color: red !important;
    color: blue !important;
}

.tablist li {
    float: left;
    margin-right: 1px;
}

.tablist li a {
    display: block;
    padding: 0 10px;
    text-decoration: none;
    border: 2px solid #FFFFFF;
    border-bottom: 0px;
    font-weight: bold;
    color: #FFFFFF;
    background: -webkit-linear-gradient(#14A4E6, #1EBFEF); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(#14A4E6, #1EBFEF); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(#14A4E6, #1EBFEF); /* For Firefox 3.6 to 15 */
    background: linear-gradient(#14A4E6, #1EBFEF); /* Standard syntax (must be last) */
    
    -webkit-border-top-right-radius: 7px;
    -webkit-border-top-left-radius: 7px;
    -moz-border-radius-topright: 7px;
    -moz-border-radius-topleft: 7px;
    border-top-right-radius: 7px;
    border-top-left-radius: 7px;
}

.tablist li a:hover {
    background: -webkit-linear-gradient(#0372E2, #1EBDEE); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(#0372E2, #1EBDEE); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(#0372E2, #1EBDEE); /* For Firefox 3.6 to 15 */
    background: linear-gradient(#0372E2, #1EBDEE); /* Standard syntax (must be last) */
    text-decoration: none;
}

.tablist li#selectedTab a {
    background: none;
    border: 2px solid #6B74C6;
    border-bottom: 0px;
    background-color: #F3F3F3;
    color: #0378D9;
    text-decoration: none;
}

JavaScript

var myApp = angular.module('myApp', []);

myApp.controller('myCtrl', function($scope) {
    $scope.title = "Lensmakers Optical Inc.";
    $scope.address = "990 Upper Wentworth St. Hamilton L9A-5E9";
    $scope.contact = "Tel. 905-387-1601";
    
    $scope.tabList = [
        { "title": "Admin",     "selected": true },
        { "title": "Profile",   "selected": false },
        { "title": "Optical",   "selected": false }
    ];
    
    $scope.selected = 0;
    $scope.previous = 0;
    
    
    $scope.currentSelectedTab = {};
    $scope.setSelectedTab = function(tab){
        $scope.currentSelectedTab = tab
    }
    
    $scope.isSelected = function(tab){
        if(tab == $scope.currentSelectedTab){
        return true;
        }
        
        return false;
    }
    
    $scope.setSelected = function(index) {
        $scope.previous = $scope.selected;
        $scope.selected = index;
        $scope.tabList[$scope.previous].selected = false;
        $scope.tabList[$scope.selected].selected = false;
    };
});