Service Portal: hide/show HTML elements, access them in client controller

1) using ng-hide

HTML:

 <div id="mi-open-tickets" ng-model = "c.openList" ng-hide="{{c.data.showOpen}}">OPEN TICKETS

Client:

function($scope) { /* widget controller */ var c = this; c.data.showOpen = false;//--show c.data.showOpen = true;//--hide

advantage: works great onload

drawback:

doesnt appear possible to hide/show dynamically

2) using display:none/block approach -  no ng-hide

html

<div class="mi-openclosed"> <div class="mi-padded"> <div class="mi-center"> <button class="btn btn-default" ng-click="mi_showOpen()">Open Issues</button>&nbsp; <button class="btn btn-default" ng-click="mi_showClosed()">Closed Issues</button> </div> <div class="typea"> <widget id="typeahead-search" options=data.search_options></widget> </div> </div> </div> <div id="mi-open-tickets" ng-model = "c.openList" >OPEN TICKETS <div ng-repeat="openTicket in ::data.openIssuesList" > <span>{{openTicket.number}} ; {{openTicket.short_description}}</span> </div> </div> <div id="mi-closed-tickets" ng-model = "c.closedList">CLOSED TICKETS <div ng-repeat="closedTicket in ::data.closedIssuesList" > <span>{{closedTicket.number}} ; {{closedTicket.short_description}}</span> </div> </div>

client script:

$scope.mi_showOpen = function() { //c.data.showOpen = false; // c.data.showClosed = true; document.getElementById("mi-closed-tickets").style.display="none"; document.getElementById("mi-open-tickets").style.display="block"; } $scope.mi_showClosed = function() { //c.data.showOpen = true; //c.data.showClosed = false; document.getElementById("mi-closed-tickets").style.display="block"; document.getElementById("mi-open-tickets").style.display="none"; }