Angular ng-hide with a dynamic flag

Question

I have a table which has row grouping based on one of the fields value. The grouping is working. I am using ng-hide to expand and collapse. By default i want the first group to be expanded and other groups to collapse. i was using a flag variable like ng-hide="flag" .

This flag was causing all the groups to either expand or collapse.

can i set this flag conditionally on runtime based on which ng-hide works dynamically. I have tried adding a javascript function and calling it in ng-hide="funct()" that did not work.

<tbody ng-repeat="group in $groups" class="ng-cloak"  >
      <tr  >
           <td class="ng-cloak"  >

               <a href="" ng-click="flag = !flag" >
            <span ng-show="flag"><i class="icon-fixed-width">&#xf067;</i></span>
    <span ng-show="!flag"><i class="icon-fixed-width">&#xf068;</i></span>

                </a>
                {{group.value}}
            </td>
        </tr>
         <tr   ng-hide ="flag" ng-repeat="x in group.data | filter:query| orderBy:predicate:reverse " >

</tr>
</tbody>

Answer 1

You could use the ng-init directive to initialize the flag with a function call:

<tr ng-init="flag = someFunction()">

Here's a jsfiddle to demonstrate this example.
Here's an updated demo using your markup: http://jsfiddle.net/gion_13/dTPvE/2/ .

Answer 2

You can use $index og ng-repeat. There are different variable of ng-repeat, $index,$first,$last etc. You use somthing like

ng-hide="$index==1"

Answer 3

Use ng-init like this:

<tbody ng-repeat="group in $groups" class="ng-cloak" ng-init="flag = !$first">

The fiddle: http://jsfiddle.net/dTPvE/4/