javascript - using angular router ui with trNgGrid issues -

i've been working on large application , starting dig deeper in angularjs have before. of stuff i've done before has been pretty simple (image galleries, navigation, etc) , i've never had multiple controllers, modules , plugins.

now have 2 plugins (angular ui router , trnggrid) i'm trying use , don't seem working together.

the page i'm using trngrid internal page. have search feature supposed return json file , need take data , put table basic grid controls.

i have 1 main template (index) , i'm using partials ui router insert html dynamically various pages.

the search page html looks this:

search results

<div ng-controller="mainctrl">     <table tr-ng-grid items='myitems'>      </table> </div> 

then have both ui router , trnggrid modules in same app.js file:

var routerapp = angular.module('routerapp', ['ui.router']);  routerapp.config(function($stateprovider, $urlrouterprovider) {      $urlrouterprovider.otherwise('/home');      $stateprovider         .state('home', {             url: '/home',             templateurl: 'global/partials/home.html'         })         .state('search', {             url: '/search',             templateurl: 'search/partials/search.html'         }) });   angular.module('routerapp', ['trnggrid'])     .controller("mainctrl", ["$scope", function ($scope) {         $scope.myitems = [{name: "moroni", age: 50},                  {name: "tiancum", age: 43},                  {name: "jacob", age: 27},                  {name: "nephi", age: 29},                  {name: "enos", age: 99}];         }]);  

when click search page, nothing happens , seems break everything. no console warnings, no nothing. take trnggrid module out , works fine.

i have ng-app directive in place bootstraps app, i've checked make sure have no 404 errors, , have scripts in place , they're loading on index.html page.

should put trnggrid module in separate file? going big app having ton of different modules in different files seems temporary fix , cause me headaches later on.

right now, i'm trying these 2 work together. if there's alternative easier work with, i'm fine that.

i believe you're overwriting module line:

angular.module('routerapp', ['trnggrid']) 

try doing instead:

var routerapp = angular.module('routerapp', ['ui.router', 'trnggrid']);  routerapp.config(function($stateprovider, $urlrouterprovider) {  $urlrouterprovider.otherwise('/home');  $stateprovider     .state('home', {         url: '/home',         templateurl: 'global/partials/home.html'     })     .state('search', {         url: '/search',         templateurl: 'search/partials/search.html'     }) });   routerapp.controller("mainctrl", ["$scope", function ($scope) {     $scope.myitems = [{name: "moroni", age: 50},              {name: "tiancum", age: 43},              {name: "jacob", age: 27},              {name: "nephi", age: 29},              {name: "enos", age: 99}];     }]);