Determine in Angular if specific area is collapse’d or not

I have a button, ya click it and it triggers a collapse on a div. I’m trying to find a way to check if the div is expanded or not so I can change the text on the button “Show” or “hide”.

Currently I’m using

ng-click="toggle = !toggle"


$scope.toggle = true;

$scope.$watch('toggle', function () {
    $scope.toggleText = $scope.toggle ? 'Show' : 'Hide';

Which sort of sorts, the issue being the collapse has an animation time so you can double click the button and have the toggle button text be out of sync with the actual state of the collapse div.

I’ve found aria-expended mentioned

var isExpanded = $(collapsableRegion).attr("aria-expanded");

But I don’t understand what needs to be set for “collapsableRegion”, and I can’t find any documentation on “.attr” to understand what exactly the collapsableRegion is (ID, Name, class, etc.)

This is probably super simple.

Source: AngularJS