Angular ng-grid in a nested tab

Question

I have an app based on this plunk.

My app has grown & it probably too large & complex to post here, so let's just continue to discuss the Plunk on which it is based.

Basically, I just want to use an ng-grid, which I will populate with JSON data received from a server, on one of the nested tabs.

That wasn't working, so I tried to simplify the problem by using the exact code of the ng-grid example (see http://angular-ui.github.io/ng-grid/).

That still wasn't working, so I tried to simplify the problem by adding the ng-grid demo to the Plunk on which my code is based.

That still isn't working, as shown by this forked Plunk. If you look at it, you can search for @@@@ begin @@@@ and @@@@ end @@@@ to see what I added to each of the three files.

Note: In my app, I can see the table contents, but left aligned & overwriting each other, as if there was a maximum width or other CSS attribute involved. In my forked plunk, the grid appears to be empty.

Answer 1

The forked plunk did not include the ngGrid scripts or jQuery, which it depends on.

<script data-require="jquery@*" data-semver="2.0.3" src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
<script data-require="ng-grid@*" data-semver="2.0.7" src="//cdnjs.cloudflare.com/ajax/libs/ng-grid/2.0.7/ng-grid.js"></script>
<script data-require="ng-grid@*" data-semver="2.0.7" src="//cdnjs.cloudflare.com/ajax/libs/ng-grid/2.0.7/ng-grid-flexible-height.min.js"></script>

You also need to inject ngGrid into your app:

var app = angular.module('plunker', ['ui.bootstrap', 'ui.bootstrap.tpls', 'ui.router', 'ngGrid'])

Here is an update to your plunk, with these changes included: http://plnkr.co/edit/V0itOu?p=preview