AngularJS ngGrid module declaration

Question

I've been messing around with Angular and have a simple test project with working however when adding in the module for ngGrid, everything just stops functioning.

A snippet of working HTML is:

   <div class="navbar-header">
            <a class="navbar-brand" ui-sref="home">{{hdr.title}}</a>
        </div>
        <!-- Collect the nav links, forms, and other content for toggling -->
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <ul class="nav navbar-nav">
                <li ng-click="hdr.setIndex(0)" ng-class="(index==0) ? 'active' : ''">
                    <!--<a href="#">Contributions</a>-->
                    <!--STATE directive-->
                    <a ui-sref="{{hdr.menu[0].state}}">{{hdr.menu[0].name}}</a>
                    <!--<a ui-sref="collections">{{hdr.menu[0].name}}</a>-->
                </li>
                <li ng-click="hdr.setIndex(1)" ng-class="(index==1) ? 'active' : ''">
                    <a ui-sref="{{hdr.menu[1].state}}">{{hdr.menu[1].name}}</a>
                </li>
                <li ng-click="hdr.setIndex(2)" ng-class="(index==2) ? 'active' : ''">
                    <a ui-sref="{{hdr.menu[2].state}}">{{hdr.menu[2].name}}</a>
                </li>


                <!--<li><a href="#"> {{hdr.title}}</a></li>-->
            </ul>
        </div>

The script contains:

angular.module('app', ['ui.router'])  

The display fails when the script is updated to either of the following:

angular.module('app', ['ui.router','ngGgrid'])
angular.module('app', ['ngGgrid'])

Now instead of the page displaying properly, all that displays is:

{{hdr.title}} {{hdr.menu[0].name}} {{hdr.menu[1].name}} {{hdr.menu[2].name}}

The script file is being loaded with:

    <script src="Scripts/ng-grid.js"></script>

Thanks in advance for any responses.

Answer 1

Another keyword search based on the response from K Scandrettt enabled me to locate another post that contained a resolution to my question.