angularjs - Error 'uiGrid' must have exactly one root element. ui-grid/ui-grid when UI-Grid is initiated -

while trying add ui-grid angular project, came across issue.

i’ve bootstrapped angel;ar application ui-grid dependency injected.

    var app = angular.module(‘myapp’,
         ['ui.bootstrap',
          'services',
          'filters',
              'directives',
              'controllers',
              'ui.grid'
         ]); 

the controller looks this.

   angular.module('controllers').controller('uigridctrl',function      uigridctrl($scope) {
    $scope.init = function(){
               $scope.mydata = [
                     {"firstname": "cox",           "lastname": "carney",           "company": "enormo",
           "employed": true
                      }
];
            };    
}); 

the view is

    <div ng-controller="uigridctrl">          <div id="grid1" ui-grid="{data: mydata}" class="grid"></div>       </div> 

since grunt used, i’ve added ui-grid dependencies in index template well.

<!-- include: "type": "css", "files": "javascripts/library/uigrid/ui-grid-stable.css" --> <!-- include: "type": "js", "files": "javascripts/library/uigrid/ui-grid-stable.js"  --> 

when try access view, error.

error: [$compile:tplrt] template directive 'uigrid' must have 1 root element. ui-grid/ui-grid.

apart fro that, there network call url.

http://localhost:port/ui-grid/ui-grid invalid url. not sure issue. suggestions?

my issue related odd http interception. when ui-grid added, triggering request http://localhost:xxxx/ng-grid/ng-grid, breaking grid , throwing error. ('uigrid' must have 1 root element. ui-grid/ui-grid) added intercepter rule ignore url format , grids started rendering fine.