Q:

Angular. ngAnimate. Animate the block in which it is itself

I have ng-repeat, and in each line there is a button (Info) that should hide the whole table (tableSpeVis). The problem is that the button does not react in any way if it is inside the block that calls
If I place the button somewhere above then the table disappears but in this case it does not disappear
Picture
HTML:
<div id="showNote">
    <div data-ng-show="tableSpeVis">
        <table class="table table-striped table-hover">
            <thead>
                <tr>
                    <th data-ng-click="sort('spename')">Специальность
                        <span class="glyphicon sort-icon" data-ng-show="sortKey=='spename'" data-ng-class="{'glyphicon-chevron-up':reverse,'glyphicon-chevron-down':!reverse}"></span>
                    </th>
                    <th data-ng-click="sort('specode')">Код
                        <span class="glyphicon sort-icon" data-ng-show="sortKey=='specode'" data-ng-class="{'glyphicon-chevron-up':reverse,'glyphicon-chevron-down':!reverse}"></span>
                    </th>
                    <th data-ng-click="sort('edulevel')">Уровень подготовки
                        <span class="glyphicon sort-icon" data-ng-show="sortKey=='edulevel'" data-ng-class="{'glyphicon-chevron-up':reverse,'glyphicon-chevron-down':!reverse}"></span>
                    </th>
                    <th data-ng-click="sort('ugsn')">УГСН
                        <span class="glyphicon sort-icon" data-ng-show="sortKey=='ugsn'" data-ng-class="{'glyphicon-chevron-up':reverse,'glyphicon-chevron-down':!reverse}"></span>
                    </th>
                    <th data-ng-click="sort('edulist')">Перечень
                        <span class="glyphicon sort-icon" data-ng-show="sortKey=='edulist'" data-ng-class="{'glyphicon-chevron-up':reverse,'glyphicon-chevron-down':!reverse}"></span>
                    </th>
                    <th data-ng-click="sort('edulist')">
                    </th>
                </tr>
            </thead>
            <tbody>
                <tr data-dir-paginate="item in items |orderBy:sortKey:reverse|itemsPerPage:10">
                    <td>{{item.spename.value}}</td>
                    <td>{{item.specode.value}}</td>
                    <td>{{item.edulevel.value}}</td>
                    <td>{{item.ugsn.value}}</td>
                    <td>{{item.edulist.value}}</td>
                    <td>
                        <!-- This button does not work -->
                        <a class="btn btn-primary" href="#" data-ng-click="tableSpeVis = false" data-ng-class="{ active: tableSpeVis }">Info</a>
                    </td>
                </tr>
                <dir-pagination-controls max-size="10" direction-links="true" boundary-links="true">
                </dir-pagination-controls>
            </tbody>
        </table>
    </div>
</div>

Thank you

A:

You should make a function to show/hide the table inside ng-repeat... 
HTML
<td>
   <a class="btn btn-primary" role="button" ng-click="hideTable()">Info</a>
</td>

CONTROLLER
function myController($scope){
    $scope.tableSpeVis = true;

    $scope.hideTable() {
        $scope.tableSpeVis = false;
    }
}

I've done a jsFiddle with a full example of your problem...

