title: Angular ng-show/ng-hide issue in nested ng-repeat
body: <p>I'm new to angular and I know this question has already been asked so many times but I'm not able to make it here.</p>
  
  <p>Here is the <a href="http://jsbin.com/wivuzufugu/edit?html,output" rel="nofollow">JSBin</a> for my problem:</p>
  
  <p>What I'm trying to accomplish here a list of cards (trello style) but I'm not able to make it as it does in trello. Here when clicking add card, angular's compile successfully add the card to list but I'm stuck to hide add card anchor tag then. I've applied some ng-show/ng-hide but then it doesn't maintain the index and hides other add card anchor in the ng-repeat (I know its natural but I'm not able to sort it out). Can somebody please help me here. Thanks </p>
  
  <p>Here is the code as well:</p>
  
  <p><strong>Angular code</strong>:</p>
  
  <pre><code>angular.module('app', []).controller('DemoCtrl',function($scope,$compile,$window){
      $scope.items = [];
      $scope.idx = '';
      $scope.c = {};
  
  $scope.addNewList = function () {
  if(typeof $scope.c.newList === 'undefined'){
   alert('list title blank');
   return;
  }
  $scope.items.push({listTitle: $scope.c.newList});
  $scope.c.newList = '';
  };
  
  $scope.addNewCardToList = function(idx) {
  $scope.idx = idx;
  var elm = '&lt;div class="list-card"&gt;&lt;textarea style="overflow: hidden; word-wrap: break-word; resize: none; height: 56px;" ng-model="c.title"&gt;&lt;/textarea&gt;&lt;input type="button" value="Add" ng-click="saveNewCardToList(idx)"&gt;&lt;a href="javascript:void(0)" ng-click="closeCard(idx)"&gt;X&lt;/a&gt;&lt;a href="javascript:void(0)"&gt;&lt;/a&gt;&lt;/div&gt;';
  var temp = $compile(elm)($scope);
  if($window.document.getElementsByClassName("list-card").length === 0)
   angular.element(document.querySelector('#compose_'+idx)).append(temp);
  };
  });
  </code></pre>
  
  <p><strong>HTML</strong>:</p>
  
  <pre><code>&lt;div ng-controller="DemoCtrl"&gt;
  &lt;div ng-repeat="item in items" style="display:inline-block;width:120px;"&gt;
  &lt;div&gt;{{item.listTitle}}&lt;/div&gt;
      &lt;div ng-repeat="inner in item.items"&gt;{{inner}}&lt;/div&gt;
      &lt;div id="compose_{{$index}}"&gt;&lt;/div&gt;
  &lt;a href="javascript:void(0)" data-ng-click="addNewCardToList($index);"&gt;Add a card...&lt;/a&gt;
  &lt;/div&gt;
  &lt;br /&gt;
  &lt;a href="javascript:void(0)" ng-click="showInput = ! showInput"&gt;Add a list...&lt;/a&gt;
  &lt;div ng-show="showInput"&gt;
  &lt;input type="text" placeholder="Add a list..." name="title" ng-model="c.newList"&gt;
  &lt;a href="javascript:void(0)" data-ng-click="addNewList()"&gt;Save&lt;/a&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>