Angular ng-show/ng-hide issue in nested ng-repeat

Question

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.

Here is the JSBin for my problem:

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

Here is the code as well:

Angular 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 = '<div class="list-card"><textarea style="overflow: hidden; word-wrap: break-word; resize: none; height: 56px;" ng-model="c.title"></textarea><input type="button" value="Add" ng-click="saveNewCardToList(idx)"><a href="javascript:void(0)" ng-click="closeCard(idx)">X</a><a href="javascript:void(0)"></a></div>';
var temp = $compile(elm)($scope);
if($window.document.getElementsByClassName("list-card").length === 0)
 angular.element(document.querySelector('#compose_'+idx)).append(temp);
};
});

HTML :

<div ng-controller="DemoCtrl">
<div ng-repeat="item in items" style="display:inline-block;width:120px;">
<div>{{item.listTitle}}</div>
    <div ng-repeat="inner in item.items">{{inner}}</div>
    <div id="compose_{{$index}}"></div>
<a href="javascript:void(0)" data-ng-click="addNewCardToList($index);">Add a card...</a>
</div>
<br />
<a href="javascript:void(0)" ng-click="showInput = ! showInput">Add a list...</a>
<div ng-show="showInput">
<input type="text" placeholder="Add a list..." name="title" ng-model="c.newList">
<a href="javascript:void(0)" data-ng-click="addNewList()">Save</a>
</div>
</div>

Answer 1

Even if your JSBin is working partially (Add and X button below textarea are not working), best solution with keeping your approach way about angular is here

BUT, this approach doesn't seems like angular-way. Commonly, anything related with DOM controlling in controller is not best practice. This will be great guide for you .

Anyway, I completed another JSBin just working fine entirely. Take a look.