AngularJS toggle divs visibility through button - angularjs-directive

Question

I have a multiple sets of two divs and a button for each per page. The two divs contains alternating content that the button should handle switching visibility. I can't seem to think of an Angular solution that can be extensible to multiple separate instances in the page (my mind keeps wanting to get it done in JQuery).
I have created a JSFiddle example here.
You will see two divs p_table class with <span class="trigger">A</span>. The trigger should alternate the two p_table inside their parent div p_container.

Answer 1

The key for how you are doing it is with ng-class, you can also do it with ng-show/ng-hide. Both implementations require no javascript, just a controller scope.
NG-CLASS: Choose a class based on a variable, which toggles on trigger click.
<div class="p_container">
<p class="p_table" ng-class="{hidden:!show,chaldean:show}">This is actual content</p>
<p class="p_table" ng-class="{hidden:show,chaldean:!show}">This is transliterated content</p>
<span class="trigger" ng-click="show=!show">A</span>
</div>
NG-SHOW/NG-HIDE: Show or hide on variable. This is the typical way of doing it.
<div class="p_container">
<p class="p_table" ng-show="show">This is actual content</p>
<p class="p_table" ng-hide="!show">This is transliterated content</p>
<span class="trigger" ng-click="show=!show">A</span>
</div>

Answer 2

Here is how I did it, using ngHide and a tiny toggle function. Working demo Here. I hope this helps
My HTML Markup
<div ng-app="myApp" ng-controller="myCtrl">
<div id="filter-row">
<span
id="toggle-filter"
ng-click="toggleFilter()">
<i class="glyphicon glyphicon-heart"></i>
</span>
<div class="hiddenDiv" ng-hide="toggle">
<p>I am the hidden Div!</p>
</div>
</div>
</div>
My AngularJS Controller
var myApp = angular.module("myApp", []);
myApp.controller ("myCtrl", ['$scope', function($scope){
$scope.toggle = true;
$scope.toggleFilter = function() {
$scope.toggle = $scope.toggle === false ? true : false;
}
}]);