Carousel with content in SharePoint using AngularJS + REST API

Hi,

i was working AngularJS and REST API, i have thought to create dynamic carousel with the help of SharePoint list data.

1. I have created custom list with two extra columns namely a) ImgURL b) Caption both are single line of text column type.

2. Here am storing images in shared documents.

3. Now open the page and edit then add script editor web part to the page.

4. Add the below script to script editor

<script src="https://<site URL>/SiteAssets/Kendo/jquery.min.js"></script>
<script src="https://<site URL>/SiteAssets/Kendo/angular.min.js"></script>

<script data-require="angular-ui-bootstrap@*" data-semver="0.6.0" src="https://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.6.0.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.js"></script>
<link href="https://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css" rel="stylesheet" />
<script>
       
var myApp=angular.module('plunker', ['ui.bootstrap']);

        myApp.service('bookService', ['$http', '$q', function ($http, $q) {

    //Define the http headers
$http.defaults.headers.common.Accept = "application/json;odata=verbose";
$http.defaults.headers.post['Content-Type'] = 'application/json;odata=verbose';
$http.defaults.headers.post['X-RequestDigest'] = $("#__REQUESTDIGEST").val();
$http.defaults.headers.post['If-Match'] = "*";
this.GetDetails= function(listTitle,$scope)
{
var restUrl = _spPageContextInfo.webAbsoluteUrl+"/_api/web/lists/getbytitle('" + listTitle + "')/items";
$http({
method: 'GET',
url: restUrl,
headers: { "Accept": "application/json;odata=verbose" }
}).success(function (data) {
$scope.slides=data.d.results;
$scope.myInterval = 3000;
}). error(function (data) {
});
}
}]);
myApp.controller('CarouselDemoCtrl', function($scope, bookService) {
$scope.Getdetails=function() {
var getdata=bookService.GetDetails('carousel',$scope);
}
});
</script>
<style>
      .carousel-indicators{left:50%; display:none;}
      .carousel-indicators li {
        background-size : 42px 22px;
        width : 42px;
        height: 22px;
        border-radius : 0px;
        text-indent : 0px;
        background-repeat : no-repeat;
        background-position : center;
        cursor : pointer;
      }
      .carousel-indicators{left:50%;}
 .carousel-caption p{align:"center";}
</style>
    
<div ng-app="plunker">
    <div ng-controller="CarouselDemoCtrl" data-ng-init="Getdetails()">
      <carousel interval="myInterval">
        <slide ng-repeat="slide in slides" active="slide.active">
          <img ng-src="{{slide.ImgURL}}" style="margin:auto;width:835px;height:445px;" />
          <div class="carousel-caption">
            <p align="center">{{slide.Caption}}</p>
          </div>
        </slide>
      </carousel>
    </div>
</div>

5. Here the output: