How to hide show div by using dynamic id in AngularJS

Question

My code as below in html file:

<ul class="main-icons"  ng-if="showMainIcons">
   <li ng-repeat="programData in tab.data">
      <img src="{{programData.icon}}"
           ng-click="programClicked($event,programData,tab)">
       // some another codes
    </li>
</ul>

<ul class="details-icons"  ng-show="tab.data.id"> 
   // some codes
</ul>

code in controller

$scope.programClicked = function($event,programData, tabData) {

        var newVar =  tabData.data.id;
        $scope.newVar = true;
        $scope.showMainIcons = false;
}

I am displaying multiple tabs, now in one tab if I click on some icon it will display the details, instead of this it is displaying all tabs details, not particular tab and I have to pass param in function while using ng-click

also I tried to pass the flag variable true/ false, its also displaying all tabs as like in controller

$scope.showDetails = true; 
$scope.showMainIcons = false

Thanks in advance

Answer 1

As I can see your html code is :

<ul class="details-icons"  ng-show="tab.data.id"> 
   // some codes
</ul>

so here you are using: "tab.data.id" but in controller you are using : var newVar = tabData.id; I think it should : var newVar = tab.data.id;