html - $index, in Table, not sequential... angularjs -

i have table in html.

the rows counted (via use of $index), , certain rows shown (via use of ng-show).

problem: $index not return right count. table's count should go "1,2,3...", not.

    <tbody>         <tr ng-repeat="fruit in basket" ng-show="fruit.isjuicy == type">             <td>{{$index + 1}}</td>             <td>{{fruit.name}}</td>         </tr>     </tbody> 

here's jsfiddle; don't forget click on buttons see issue: http://jsfiddle.net/f6hcx/2/

what causing counting problem? how can solved?

(could please comment/rate question's description clarity, (was understood?) cheers!)

edit: question has been answered. more info using filters: how use parameters within filter in angularjs?

the problem using ng-show show or hide individual items. in reality, $index correctly counting number of items — it's hidden, can't see values.

if closely @ example, you'll see $index values match original index of items in question.

instead, want filter list before gets rendered, using filter filter (yes, it's really confusingly named!).

just change tr in html like:

<tr ng-repeat="fruit in basket | filter:{isjuicy:type}"> 

here's fully functional jfiddle.

what's happening:

the filter filter used filter list of items against sort of search parameters. can take string, search all properties of all objects filter on, or can take object literal can used specify fields search.

in case, we've asked filter list based on items have parameter isjuicy matches current value of type, in scope.

now ng-repeat bother looping on matched items, , therefore $index increment expected.