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

While trying to add ui-grid to an angular project, I came across this issue.

I’ve bootstrapped the angel;ar application with ui-grid dependency injected.

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

The controller looks like 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 was used, I’ve added the ui-grid dependencies in my index template as well.

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

When I try to access my view, I get this error.

Error: [$compile:tplrt] Template for directive 'uiGrid' must have exactly one root element. ui-grid/ui-grid.

Apart fro that, there is a network call to this url.

http://localhost:PORT/ui-grid/ui-grid which is an invalid url. Not sure what is the issue. Any suggestions?

My issue was related to an odd http interception. When ui-grid was added, it was triggering a get request to http://localhost:xxxx/ng-grid/ng-grid, which was breaking the grid and throwing the error. ('uiGrid' must have exactly one root element. ui-grid/ui-grid) Added an intercepter rule to ignore that url format and then the grids started rendering fine.