<!DOCTYPE html>
<html ng-app="angularjs-starter">
<head lang="en">
<meta charset="utf-8">
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.3/angular.min.js"></script>
<link rel="stylesheet" href="style.css">
<script src="../app.html"></script>
</head>
<body ng-controller="MainCtrl">
{{ selected }}
<ul>
<li ng-class="{current: selected == 100}">
<a href ng:click="selected=100">ABC</a>
</li>
<li ng-class="{current: selected == 101}">
<a href ng:click="selected=101">DEF</a>
</li>
<li ng-class="{current: selected == $index }"
ng-repeat="x in [4,5,6,7]">
<a href ng:click="selected=$index">A{{$index}}</a>
</li>
</ul>
<div
ng:show="selected == 100">
100
</div>
<div
ng:show="selected == 101">
101
</div>
<div ng-repeat="x in [4,5,6,7]"
ng:show="selected == $index">
{{ $index }}
</div>
</body>
</html>
var app = angular.module('angularjs-starter', []);
app.controller('MainCtrl', function($scope) {
$scope.message = 'World';
$scope.GiantList = [{name: 'one'}, {name: 'two'}, {name: 'three'}];
$scope.saveData= {};
});
.current { color: red; }