Making a toggle ng-click event

Question

I have been able to create a function to successfully toggle the rows in my ng-table to expand on click, however, when clicking them again they will not hide. The function in the javascript is:

$scope.toggle = function() {
    return !this.booleanVal;
}; 

The booleanVal is being a value from the json file (each row with its own value). Then in the HTML.

<p class="row_description more" ng-click="row.booleanVal = toggle()">{{row.description}</p>
<div class="check-element animate-show" ng-show="row.booleanVal">

It works for the first click, turning the previously false booleanVal to true, however, it doesn't toggle back to false. Any idea what's going wrong?

Answer 1

Try this:

<p class="row_description more" ng-click="row.booleanVal = !row.booleanVal">
    {{row.description}
</p>
<div class="check-element animate-show" ng-show="row.booleanVal"></div>