title: How to add a left arrow like tooltip in the boxes coming from loop in angularjs
body: <p>I have some link Click-1,Click-2 etc, when I click on it corresponding box will show. That box is already having position absolute. I want to add a small arrow on the left side of each box which should be like tooltip, I already used css shapes but it cannot possible with same div,for that I need to create other div and to put position absolute,but it was not coming correctly.Here is the code below. <a href="https://plnkr.co/edit/jv7uKHlryMnkJgK9wVM6?p=preview" rel="nofollow noreferrer">https://plnkr.co/edit/jv7uKHlryMnkJgK9wVM6?p=preview</a></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;div ng-click="setActiveItem(x)" class="id"&gt;Click-{{x.id}}&lt;/div&gt;
         &amp;nbsp;&amp;nbsp;&amp;nbsp;ssssssssssss
         &lt;div class="arrow_box name" ng-show="activeItem==x"&gt;
         &lt;h3&gt;{{x.name}}&lt;h3&gt;
         &lt;p&gt;Hello world&lt;/p&gt;
         &lt;h3&gt;{{x.name}}&lt;h3&gt;
         &lt;p&gt;Hello world&lt;/p&gt;
         &lt;h3&gt;{{x.name}}&lt;h3&gt;
         &lt;p&gt;Hello world&lt;/p&gt;
         &lt;/div&gt;
      &lt;/li&gt;
    &lt;/ul&gt;  
  &lt;/div&gt;
    &lt;/body&gt;
  
  &lt;/html&gt;
  </code></pre>
  
  <h2>CSS</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: 202px;
      overflow: auto;
      width: 24%;
  }
  .arrow_box {
      position: absolute;
      background: #ffffff;
      border: 1px solid #ccc;
  }
  .arrow_box:after, .arrow_box:before {
      right: 100%;
      top: 50%;
      border: solid transparent;
      content: " ";
      height: 0;
      width: 0;
      position: absolute;
      pointer-events: none;
  }
  
  .arrow_box:after {
      border-color: rgba(0, 0, 0, 0);
      border-right-color: #000000;
      border-width: 5px;
      margin-top: -5px;
  }
  .arrow_box:before {
      border-color: rgba(0, 0, 0, 0);
      border-right-color: #000000;
      border-width: 8px;
      margin-top: -8px;
  }
  .id,name{
  float:left;
  }
  </code></pre>
  
  <h2>SCRIPT</h2>
  
  <pre><code>var data = [{"name":"name1","title":"title1","id":"1"},{"name":"name2","title":"title2","id":"2"},{"name":"name3","title":"title3","id":"3"}];
  var app = angular.module("myApp", []);
  app.controller("myCtrl", function($scope) {
  
    $scope.data = data;
  
    $scope.setActiveItem = function(item){
       $scope.activeItem = item;
    }
  
    // show first on page load
    // $scope.activeItem = data[0];
  
  });// Code goes here
  </code></pre>