angularjs - Videogular Controllers are not working when used along with onsen UI -

i'm trying make video player application using onsen ui (https://onsen.io) , videogular (http://www.videogular.com/). when used video controllers of videogular not working. following code.

<link rel="stylesheet" href="lib/onsen/css/onsenui.css"> <link rel="stylesheet" href="lib/onsen/css/onsen-css-components.css"> <link rel="stylesheet" href="list_with_header.css"> <link href="css/style.css" rel="stylesheet" type="text/css"> <script src="lib/onsen/js/angular/angular.js"></script> <script src="lib/onsen/js/onsenui.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular-sanitize.min.js"></script> <script src="http://static.videogular.com/scripts/videogular/latest/videogular.js"></script> <script src="http://static.videogular.com/scripts/controls/latest/vg-controls.js"></script> <script src="http://static.videogular.com/scripts/overlay-play/latest/vg-overlay-play.js"></script> <script src="http://static.videogular.com/scripts/poster/latest/vg-poster.js"></script> <script src="http://static.videogular.com/scripts/buffering/latest/vg-buffering.js"></script> <script>       ons.bootstrap(); </script> <style type="text/css"> html, body {     margin: 0;     padding: 0; } .playlist ul {     list-style-type: none; } .playlist ul {     cursor: pointer;     color: #428bca;     text-decoration: none; } .playlist ul a:visited {     color: #428bca; } .playlist ul a:hover {     color: #428bca;     text-decoration: underline; } .videogular-container {     width: 100%;     height: 320px;     margin: auto;     overflow: hidden; } .videogular-container .skipbutton {     position: absolute;     padding: 10px;     top: 10px;     right: 10px;     z-index: 99999;     color: white;     cursor: pointer;     background-color: #666666;     border: 2px #ffffff solid;     display: none;     -webkit-border-radius: 10px;     -moz-border-radius: 10px;     -ms-border-radius: 10px;     border-radius: 10px; }  @media (min-width: 1200px) { .videogular-container {     width: 1170px;     height: 658.125px; } .videogular-container.audio {     width: 1170px;     height: 50px; } }  @media (min-width: 992px) , (max-width: 1199px) { .videogular-container {     width: 940px;     height: 528.75px; } .videogular-container.audio {     width: 940px;     height: 50px; } }  @media (min-width: 768px) , (max-width: 991px) { .videogular-container {     width: 728px;     height: 409.5px; } .videogular-container.audio {     width: 728px;     height: 50px; } } </style> <script> 'use strict'; angular.module('demoappvideo',         [             "ngsanitize",             "com.2fdevs.videogular",             "com.2fdevs.videogular.plugins.controls",             "com.2fdevs.videogular.plugins.overlayplay",             "com.2fdevs.videogular.plugins.poster",             "com.2fdevs.videogular.plugins.buffering"         ]     )     .controller('homectrl',         ["$sce", "$timeout", function ($sce, $timeout) {             var controller = this;             controller.state = null;             controller.api = null;             controller.currentvideo = 0;              controller.onplayerready = function(api) {                 controller.api = api;             };              controller.oncompletevideo = function() {                 controller.iscompleted = true;                  controller.currentvideo++;                  if (controller.currentvideo >= controller.videos.length) controller.currentvideo = 0;                  controller.setvideo(controller.currentvideo);             };              controller.videos = [             {                 sources: [                     {src: $sce.trustasresourceurl("http://static.videogular.com/assets/videos/videogular.mp4"), type: "video/mp4"},                     {src: $sce.trustasresourceurl("http://static.videogular.com/assets/videos/videogular.webm"), type: "video/webm"},                     {src: $sce.trustasresourceurl("http://static.videogular.com/assets/videos/videogular.ogg"), type: "video/ogg"}                 ]             },             {                 sources: [                     {src: $sce.trustasresourceurl("http://static.videogular.com/assets/videos/big_buck_bunny_720p_h264.mov"), type: "video/mp4"},                     {src: $sce.trustasresourceurl("http://static.videogular.com/assets/videos/big_buck_bunny_720p_stereo.ogg"), type: "video/ogg"}                 ]             }         ];              controller.config = {                 preload: "none",                 autohide: false,                 autohidetime: 3000,                 autoplay: false,                 sources: controller.videos[0].sources,                 theme: {                     url: "http://www.videogular.com/styles/themes/default/latest/videogular.css"                 },                 plugins: {                     poster: "http://www.videogular.com/assets/images/videogular.png"                 }             };              controller.setvideo = function(index) {                 controller.api.stop();                 controller.currentvideo = index;                 controller.config.sources = controller.videos[index].sources;                 $timeout(controller.api.play.bind(controller.api), 100);             };         }]     );  </script> <ons-tabbar>   <ons-tab page="home.html" label="home" icon="ion-home" active="true"></ons-tab>   <ons-tab page="comments.html" label="comments" icon="ion-chatbox-working"></ons-tab>   <ons-tab page="tags.html" label="tags" icon="ion-ios-pricetag"></ons-tab>   <ons-tab page="settings.html" label="settings" icon="ion-ios-cog"></ons-tab> </ons-tabbar>  <ons-template id="home.html"> <ons-page> <ons-toolbar> <div class="left" style="line-height: 44px">   <ons-back-button>back</ons-back-button> </div> <div class="center">artists</div> <div class="right" style="line-height: 44px"> right </div> </ons-toolbar> <div ng-app="demoappvideo">   <div ng-controller="homectrl controller">     <div class="videogular-container">       <videogular vg-player-ready="controller.onplayerready($api)" vg-complete="controller.oncompletevideo()" vg-theme="controller.config.theme.url">         <vg-media vg-src="controller.config.sources"                       vg-tracks="controller.config.tracks"> </vg-media>         <vg-controls>           <vg-play-pause-button></vg-play-pause-button>           <vg-time-display>{{ currenttime | date:'mm:ss':'+0000' }}</vg-time-display>           <vg-scrub-bar>             <vg-scrub-bar-current-time></vg-scrub-bar-current-time>           </vg-scrub-bar>           <vg-time-display>{{ timeleft | date:'mm:ss':'+0000' }}</vg-time-display>           <vg-volume>             <vg-mute-button></vg-mute-button>             <vg-volume-bar></vg-volume-bar>           </vg-volume>           <vg-fullscreen-button></vg-fullscreen-button>         </vg-controls>         <vg-overlay-play></vg-overlay-play>         <vg-buffering></vg-buffering>         <vg-poster vg-url='controller.config.plugins.poster'></vg-poster>       </videogular>     </div>     <div class="playlist">       <ul>         <li><a ng-click="controller.setvideo(0)">pale blue dot</a></li>         <li><a ng-click="controller.setvideo(1)">big buck bunny</a></li>       </ul>     </div>   </div> </div> </ons-page> </ons-template> 

error code received. "error: [ng:areq] argument 'homectrl' not function, got undefined

you loading angularjs twice ons.bootstrap , angular.module('demoappvideo', []), it's not taking second part. read ons.bootstrap function here.

basically, can angular way (remember add 'onsen'):

<script>   // assume 'ng-app' defined 'my-app'   var module = angular.module('my-app', ['onsen', 'nganimate']);   module.controller('appcontroller', function($scope) { }); </script> 

or can use ons.bootstrap instead:

<script>   // no need define 'ng-app'   var module = ons.bootstrap(['nganimate']);   module.controller("appcontroller", function($scope){ }); </script>