AngularJS - ng-repeat inside of ng-grids 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'd like to create a grid that will look something like:

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

etc...

In my controller, I've tried is the follwing 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, and not the entire set.

I've tried looking through the docs, but couldn't find anything,

what am i missing?

Answer 1

Did you check the height of the grid? Here's plnkr with your code and its working.

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>