AngularJS - ng-repeat inside ng mesh cellTemplate

Question

Given the following data set:

{
    "url": "www",
    "words": [
        {
            "name": "fish",
            "count": 1
        },
        {
            "name": "pig",
            "count": 60
        }
    ]
},
{
    "url": "www",
    "words": [
        {
            "name": "zebra",
            "count": 0
        },
        {
            "name": "cat",
            "count": 12
        }
    ]
},
{
    "url": "www",
    "words": [
        {
            "name": "dog",
            "count": 0
        },
        {
            "name": "antilope",
            "count": 2
        }
    ]
}

I would like to create a grid that would look something like this:

   URL     Words:Count
--------|--------------
|       |   fish:1    |
| www   |   pig:60    |

etc...

In my controller, I tried - this is the following configuration:

$scope.gridOptions = { 
        data: 'data',
        columnDefs: [
        {field:'url', displayName:'URL'}, 
        {displayName:'Words:Count', cellTemplate: '<div class="ngCellText"><div ng-repeat="word in row.entity.words">{{word.name + ":" + word.count}}</div>'}
  ]
}

But all I get is the first word: count, not the whole set.

I tried to browse the docs but didn't find anything,

What am I missing?

Answer 1

Have you checked the height of the grid? Here plnkr with your code and its work.

style.css

.gridStyle {
    border: 1px solid rgb(212,212,212);
    width: 400px; 
    height: 300px;
}

JavaScript:

...

$scope.gridOptions = {
...

rowHeight: 80 // height of each row

...
};

...

index.html

<div class="gridStyle" ng-grid="gridOptions"></div>