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

Question

I'm trying to make a video player application using OnSen UI (https://onsen.io) and Videogular (http://www.videogular.com/). When i used together the video controllers of videogular is not working. Following are my 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 a {
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) and (max-width: 1199px) {
.videogular-container {
width: 940px;
height: 528.75px;
}
.videogular-container.audio {
width: 940px;
height: 50px;
}
}
#media (min-width: 768px) and (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 as 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 I received.
"Error: [ng:areq] Argument 'HomeCtrl' is not a function, got undefined

Answer 1

You are loading AngularJS twice with ons.bootstrap and then with angular.module('DemoAppVideo', []), so it's probably not taking the second part. Read about ons.bootstrap function here.
Basically, you can do it the Angular way (remember to add 'onsen'):
<script>
// Assume 'ng-app' is defined as 'my-app'
var module = angular.module('my-app', ['onsen', 'ngAnimate']);
module.controller('AppController', function($scope) { });
</script>
Or you can use ons.bootstrap instead:
<script>
// No need to define 'ng-app'
var module = ons.bootstrap(['ngAnimate']);
module.controller("AppController", function($scope){ });
</script>

Answer 2

Its Fixed by initializing onsen in Angular way,
var module = ons.bootstrap('myApp',
[
"ngSanitize",
"com.2fdevs.videogular",
"com.2fdevs.videogular.plugins.controls",
]);