nested ng-repeat showing wrong $index

Question

i tried working with ng-repeat but got stucked when $index keeps showing the wrong thing here is my code http://codepen.io/netwrkx/pen/VamRjo

<div ng-controller="ctrl">
    <div class="row responsive-sm " ng-repeat="items in DataAPI">
        <div class="card1" ng-repeat="item in items">
            <div class="row">
                <div class="">            
                    <input type="submit" ng-click="showFullPost($index)"></input>
                    <h4 class="post-title">{{item}} {{$index}}</h4>
               </div>
            </div>
        </div>
    </div>
</div>

function ctrl($scope){
    $scope.items = ["orange", "mango", "grape", "apple", "pineapple", "lemon"];

    $scope.DataAPI =  [["orange", "mango"],["grape", "apple"], [ "pineapple", "lemon"]];

    $scope.showFullPost = function(index){
                    console.log($scope.items[index] );
                    //$state.go('post');
                }

}

trying to loop through

child $scope.items = ["orange", "mango", "grape", "apple", "pineapple", "lemon"];

parent $scope.DataAPI = [["orange", "mango"],["grape", "apple"], [ "pineapple", "lemon"]];

$index keeps showing only orange and mango. what am i missing??

ANY IDEA...

Answer 1

This will label the items 0, 1, 2, 3, 4, 5.

<div ng-repeat="items in DataAPI track by $index">
  <div ng-repeat="item in items" ng-init="idx = $parent.$index * items.length + $index">
    <button ng-click="showFullPost(idx)">View Full</button>
    <h4 class="post-title">{{item}} {{idx}}</h4>
  </div>
</div>