Using Angular Directive twice in nested mode

Question

I am working on an AngularJS - Laravel Web app, and I have an issue in one of my directive .

The issue is when I use this directive twice in nested way like:

<new-fc-grid>

  <new-fc-grid>
  </new-fc-grid>

</new-fc-grid>

the parent one is working perfectly but the child one is working for the first time only but it stop updating .

let's have a minimal example

the directive

angular.module('myApp').directive('newFcGrid',function($http){
return{
    scope:{
      items:'=',
      url:'@?',
      limit:"=?",
      updateGrid:'&'


    },
    link:function(scope,ele,attrs){
        console.log('newGrid scope',scope)
        //defaults
        scope.items=[] 
        scope.limit = scope.limit || 4;

        scope.updateGrid = function () {

            var data ={
                index:scope.index,
                limit:scope.itemsPerPage,       
            }


          $http({
                  url:scope.url,
                  method:scope.method,
                  data:data
          }).success(function (res) {
              scope.items =res.data;
              console.log(scope.items);
          }).error(function (err) {
              console.log(err);
          });
        }


        scope.updateGrid();
    }
})

HTML

<new-fc-grid url='api/articles' items='articles' limit='5'>
 <div ng-repeat='article in articles'></div>
  <new-fc-grid url='api/articles/{{article.id}}/comments' items='comments' limit='10'>
    <div ng-repeat='comment in comments'></div>
  </new-fc-grid>

</new-fc-grid>

The Issue

When I load the pages I see all articles with its corresponding comments but when I get the next 5 articles I see the new articles with the old comments the inner directive not updated !!

Note

the directive have a ton of features and templating options but this just for clarify the main issue with minimal example