Onsen carousel & template with json - angularjs

Question

I have an Onsen-UI template/index where I have a carousel and have each carousel-item calling a ons-template id (html). One of those templates is calling for ng-controller (which is calling for json api) and has usual javascript within it.
If I view the index.html in Chrome, the list shows but when I build it as phonegap app and run the apk on my android device, the list never appears. It just loads in a loop without 'loading' it.
Also, when I click on a list item it should take me to another html template to display the correct information and where (page.html), which Chrome doesn't do (could be just an issue in chrome).
I'm hoping if I get the list to display on my app, then the second part would fix itself or do I need to do some extra tweaking?
Here is my template code calling the controller:
<ons-template id="news.html">
<ons-page>
<div class="app-page opacity-bar">
<div class="app-page-content">
<div class="app-page news-page" ng-controller="newsController" data-ng-init="getAllRecords()">
<ons-list modifier="news">
<ons-list-item modifier="chevron" class="list-item-container" ng-repeat="item in items" ng-click="showPost($index)">
<ons-row>
<ons-col width="95px">
<img ng-show="{{ item.thumbnail_images }}" ng-src="{{ item.thumbnail_images.thumbnail.url }}" class="thumbnail">
</ons-col>
<ons-col>
<div class="name">
{{ item.title | limitTo: 15 }}...
</div>
<div class="location" ng-show="{{ item.categories }}">
<i class="ion-pricetags"></i> <span ng-repeat="cat in item.categories">{{cat.title}} </span>
</div>
<div class="desc">
{{ item.excerpt | htmlToPlaintext | limitTo: 60 }}...
</div>
</ons-col>
<ons-col width="40px"></ons-col>
</ons-row>
</ons-list-item>
</ons-list>
<ons-button id="moreButton" modifier="large" should-spin="{{isFetching}}" ng-click="nextPage()">more news</ons-button>
</div></div></div>
</ons-page>
</ons-template>

Answer 1

The carousel is very weak, bad implemented, i have same issue too, and the support is NULL

Answer 2

May be this link will help for you, Check with the code
<ons-page>
<ons-toolbar>
<div class="center">Carousel</div>
</ons-toolbar>
<ons-carousel ng-controller="CarouselController" swipeable auto-scroll fullscreen var="carousel">
<ons-carousel-item style="background-color: gray;">
<div class="item-label">GRAY</div>
</ons-carousel-item>
<ons-carousel-item style="background-color: #085078;">
<div class="item-label">BLUE</div>
</ons-carousel-item>
<ons-carousel-item style="background-color: #373B44;">
<div class="item-label">DARK</div>
</ons-carousel-item>
<ons-carousel-item style="background-color: #D38312;">
<div class="item-label">ORANGE</div>
</ons-carousel-item>
<ons-carousel-cover>
<div class="bullets">
<span
ng-repeat="idx in indices"
ng-class="{'active': idx === carousel.getActiveCarouselItemIndex()}">
•
</span>
</div>
</ons-carousel-cover>
</ons-carousel>
</ons-page>