List styling with ngRepeat.
HTML
<div ng-app ng-controller="Ctrl">
<ul>
<li ng-repeat="link in links" ng-class="getClass($index)" ng-click="select($index)"><a href="{{link.destination}}"><span>{{link.name}}</span></a>
</li>
</ul>
</div>
CSS
ul {
list-style-type: none;
}
.active {
list-style-type: url('https://mdn.mozillademos.org/files/11981/starsolid.gif');
}
JavaScript
function Ctrl($scope) {
$scope.links = [
{name: 'Home', destination: '#'},
{name: 'Next', destination: '#'},
{name: 'About', destination: '#'}
];
$scope.index = Number.NaN;
$scope.getClass = function(index) {
if (index === $scope.index) {
return 'active';
}
};
$scope.select = function(index) {
$scope.index = index;
};
}