angularjs - Use Angular-Datatable in Umbraco 7 custom section -

i trying use angular datatable server side processing in umbraco custom section. problem when use line:

angular.module('umbraco', ['datatables']) 

if include datatables dependency following error:

angular.min.js?cdv=886402897:63 error: argument 'umbraco.maincontroller' not function, got undefined     @ error (native)     @ cb (http://localhost:65055/umbraco/lib/angular/1.1.5/angular.min.js?cdv=886402897:17:114)     @ xa (http://localhost:65055/umbraco/lib/angular/1.1.5/angular.min.js?cdv=886402897:17:187)     @ $get (http://localhost:65055/umbraco/lib/angular/1.1.5/angular.min.js?cdv=886402897:53:310)     @ http://localhost:65055/umbraco/lib/angular/1.1.5/angular.min.js?cdv=886402897:44:274     @ n (http://localhost:65055/umbraco/lib/angular/1.1.5/angular.min.js?cdv=886402897:7:74)     @ k (http://localhost:65055/umbraco/lib/angular/1.1.5/angular.min.js?cdv=886402897:44:139)     @ e (http://localhost:65055/umbraco/lib/angular/1.1.5/angular.min.js?cdv=886402897:40:139)     @ e (http://localhost:65055/umbraco/lib/angular/1.1.5/angular.min.js?cdv=886402897:40:156)     @ e (http://localhost:65055/umbraco/lib/angular/1.1.5/angular.min.js?cdv=886402897:40:156) 

this package.manifest:

javascript : [                   '~/app_plugins/blogshop/backoffice/blogshoptree/js/jquery.datatables.js',             '~/app_plugins/blogshop/backoffice/blogshoptree/js/angular-datatables.js',             '~/app_plugins/blogshop/backoffice/blogshoptree/js/serversideprocessing.js',         ],  

this controller:

angular.module('umbraco',['datatables']).controller('datatable.controller', function (dtoptionsbuilder, dtcolumnbuilder) {     vm.dtoptions = dtoptionsbuilder.newoptions()         .withoption('ajax', {             // either specify ajaxdataprop here             // datasrc: 'data',             url: '/angular-datatables/data/serversideprocessing',             type: 'post'         })      // or here      .withdataprop('data')         .withoption('processing', true)         .withoption('serverside', true)         .withpaginationtype('full_numbers');     vm.dtcolumns = [         dtcolumnbuilder.newcolumn('id').withtitle('id'),         dtcolumnbuilder.newcolumn('name').withtitle('first name'),         dtcolumnbuilder.newcolumn('father').withtitle('last name').notvisible()     ]; }); 

and html:

<div ng-controller="datatable.controller showcase">             <table datatable="" dt-options="showcase.dtoptions" dt-columns="showcase.dtcolumns" class="row-border hover"></table>         </div> 

what doing wrong?

the issue 'umbraco' module being recreated rather retrieved. following quoted official anguljs module docs

creation versus retrieval

beware using angular.module('mymodule', []) create module mymodule , overwrite existing module named mymodule. use angular.module('mymodule') retrieve existing module.

^this destroys dependencies set elsewhere (like umbraco). usage of datatables seems don't need try following. i'm afraid can't test code withyour example 100% don't have serverside backing, approach tested , pattern have used extensively. big difference not including requires argument which, if specified - (re)creates module.

var app = angular.module("umbraco");         app.requires.push('datatables');           app.controller('datatable.controller', function (dtoptionsbuilder, dtcolumnbuilder) {             vm.dtoptions = dtoptionsbuilder.newoptions()                 .withoption('ajax', {                     // either specify ajaxdataprop here                     // datasrc: 'data',                     url: '/angular-datatables/data/serversideprocessing',                     type: 'post'                 })              // or here              .withdataprop('data')                 .withoption('processing', true)                 .withoption('serverside', true)                 .withpaginationtype('full_numbers');             vm.dtcolumns = [                 dtcolumnbuilder.newcolumn('id').withtitle('id'),                 dtcolumnbuilder.newcolumn('name').withtitle('first name'),                 dtcolumnbuilder.newcolumn('father').withtitle('last name').notvisible()             ];         });