I am currently experimenting with making HTML headings active or inactive based on the value of the active variable. In order to toggle the active status by clicking on the heading, I am utilizing the $index variable from the ng-repeat directive:
<div ng-init="active = 1">
<h4 ng-repeat="(key, val) in vm.headings" ng-click="active = $index" ng-class="{'active': active === $index}">
{{key}}
</h4>
</div>
This is the Heading object:
vm.headings = {
"HEADING_1": "CONTENT",
"HEADING_2": "CONTENT",
"HEADING_3": "CONTENT"
};
Upon initial loading, one of the headings will appear as 'active' as specified. However, upon subsequent clicks, the desired outcome is not achieved. Instead, all headings become active when clicked. You can view the demo here.