javascript - Ng-Repeat, how to test for last ng-show element -

i not trying add different class last element of ng-repeat.

i have data display:

$scope.sizes = [{name:xs,available:true},{name:s,available:true},{name:m,available:false},{name:l,available:true},{name:xl,available:false}]; 

i want display range of data contains true, i.e. display above "xs → l" (note missing out m option).

best have come using ng-repeat:

<span ng-repeat="size in sizes track $index"                       ng-init="sizeindex = $index"                       ng-show="size.available == true && (sizeindex == 0  || sizeindex == (sizes.length -1))">                     {{size.short}}<span ng-show="sizeindex ==0"> → </span>                 </span> 

as expected fails because size xl available == false, , won't work if size xs unavailable.

is there permutation of display logic haven't thought of? or there 'proper' way test if element last (or first) shown in list?

if filter available simple $first n $last work

  <li class="animate-repeat" ng-repeat="size in sizes | filter: {available:true}">    <div ng-show="$first">{{size.name}}</div>     <div ng-show="$last">{{size.name}}</div>   </li> 

demo https://plnkr.co/edit/qhikruoudsypczwuvdce?p=preview fork of angular doc example