title: Angularjs - How to show specific div onclick a specific link and hide previous div with ng repeat- like tabs
body: <p>Here I have 3 link,When I click a link specific div is showing,again when I click next div specific div is showing,but here I need to hide previous div onclick of next link each time.Here link and div are comes from ng repeat.For ex - when I click 'Click-1' 'name1' should show,again when I click 'Click-2' only 'name2'  should show and 'name1' should hide...so on. Here is the code below</p>
  
  <h2>HTML</h2>
  
  <pre><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"&gt;&lt;/script&gt;
  &lt;div class="maindiv" ng-app="myApp" ng-controller="myCtrl"&gt;
  &lt;ul&gt;
  &lt;li ng-repeat="x in data"&gt;&lt;span ng-click="showDetails($index,0)" class="id"&gt;Click-{{x.id}}&lt;/span&gt;&amp;nbsp;&amp;nbsp;&amp;nbsp;sssssssssssssss&lt;span ng-show="div_[$index+'_0']" class="name"&gt;{{x.name}}&lt;/span&gt;&lt;/li&gt;
  &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <h2>Script</h2>
  
  <pre><code>var app = angular.module("myApp", []);
  app.controller("myCtrl", function($scope) {
  $scope.div_=[];
      $scope.showDetails = function(index,row){
          $scope.div_[index+'_'+row]= true;
      }
     $scope.data=
     [{
          "name": "name1",
          "id": "1"
      },
      {
          "name": "name2",
          "id": "2"
      },
      {
          "name": "name3",
          "id": "3"
      }
  ]
  });
  </code></pre>
  
  <h2>style</h2>
  
  <pre><code>ul li{
  list-style-type:none;
  cursor:pointer;
  }
  ul{
  margin:0;
  }
  .maindiv{
  position:relative;
  }
  .name{
  position: absolute;
      left: 97px;
      background: #fff;
      border: 1px solid;
      width: 61px;
      height: 23px;
  }
  </code></pre>