angularjs collapse + ng-if doesn't work ng-show works

Question

I've got a button linked to a UI Bootstrap Collapse directive if I click on it the script show a form to reply a comment. when the form is showed I want to hide the button but I've got a strange behavior

this doesn't work:

<a data-ng-click="isCollapsed = !isCollapsed" data-ng-if="isCollapsed" class="btn btn-info btn-xs" title="reply comment">
    <span class="glyphicon glyphicon-share-alt"></span> Reply
</a>

this work:

<a data-ng-click="isCollapsed = !isCollapsed" data-ng-show="isCollapsed" class="btn btn-info btn-xs" title="reply comment">
    <span class="glyphicon glyphicon-share-alt"></span> Reply
</a>

and I don't really know why !

Can you enlighten me, please ?

Answer 1

This is expected because ng-if creates new child scope and isCollapsed property is created in it on the first click. But ng-if itself is looking at the parent scope.

Try using toggle() function declared on controller level for ng-click

$scope.toggle = function () {
    $scope.isCollapsed = !$scope.isCollapsed;
};

Consider using the rule:

Treat $scope as read only in templates.