javascript - AngularJS implementing ui-grid -

i attempting use ui-grid along w/ angularjs first time. doing tutorial on nggrid... when looked reference files said ui-grid on them.... bit confused.

i have referenced following in aspx page:-

<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script> <script src="http://code.angularjs.org/1.0.5/angular.js"></script> <link href="content/bootstrap.css" rel="stylesheet" />     <script src="scripts/jquery-1.12.0.min.js"></script> <script src="scripts/ui-grid.min.js"></script> <link href="content/ui-grid.min.css" rel="stylesheet" /> 

my javascript gridview work looks this:-

<asp:content id="content1" runat="server" contentplaceholderid="secondarycontent"> <script type="text/javascript">             var app = angular.module('', ['nggrid']);         app.controller('usercontroller', function ($scope) {              $scope.mydata = [{ name: "xxxx", age: 50 },                              { name: "yyyy", age: 43 },                              { name: "zzzz", age: 27 },                              { name: "eeee", age: 29 },                              { name: "ffff", age: 34 }];              $scope.gridoptions = {                 data: 'mydata',                 showgrouppanel: true,                 jqueryuidraggable: true             };         });    </script> </asp:content> 

and aspx body looks like:-

<asp:content id="bodycontent" contentplaceholderid="maincontent" runat="server">       <h1>my angularjs application</h1>      <div class="row">         <div style="margin-top: 40px"></div>         <div data-ng-app="" data-ng-controller="usercontroller">             <b>employee list</b><br />             <br />             <div class="gridstyle" data-ng-grid="gridoptions"></div> 

with of in place, empty grid following style, referenced through div class:-

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

i must missing ... no idea though.

when check console on browser, gives me following error:- uncaught error: unknown provider: $rootscopeprovider <- $rootscope

edit:- created code in plunker , works on emulator not via visual studio 2013 on aspx page (it works via html page):-

http://plnkr.co/edit/l3n5cetmtltqagnm6axk?p=preview

you must inject 'ui.grid' not 'nggrid' , change implementation:

<div id="grid1" ui-grid="gridoptions" class="grid"></div> 

check example: http://plnkr.co/edit/bq8avbvb7uxwbebnkoro?p=preview