Is there any option to put $last ng-repeat result like this <li class="active">Four</li> instead of <li><a href="#">Four</a></li> ?
I have been trying with ng-if but unfortunately it did not give good solution yet :(
DEMO: http://codepen.io/anon/pen/bdvVRe
var app = angular.module('myapp', []);
app.controller('testController', function($scope) {
$scope.mymenu = ["one", "two", "three", "four"];
});<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myapp">
<div ng-controller="testController" class="container">
<strong>Expecting</strong>
<br />
<ol class="breadcrumb">
<li><a href="#">One</a></li>
<li><a href="#">Two</a></li>
<li><a href="#">Three</a></li>
<li class="active">Four</li>
</ol>
<hr />
<strong>Current result</strong>
<ol class="breadcrumb">
<li ng-repeat="menu in mymenu"><a href="#">{{menu}}</a></li>
</ol>
</div>
</div><li ng-repeat="menu in mymenu" ng-class="{active: $last}">
<a ng-if="!$last" href="#">{{menu}}</a>
<span ng-if="$last">{{menu}}</span>
</li>