Angular Js bootstrap carousel - css

Question

Trying to use bootstrap, angular and carousel, to display images in their respective folders that are on my local drive but stuck on how to go about tailoring my angular file. Here is an example, but this example picks images from the Internet. How do i go about it.
here is the site with the source code http://www.cssscript.com/demo/responsive-image-carousel-with-angular-js-and-bootstrap-3/#abstract
here is the angular file.
app.controller('portfoliocontroller', ['$scope', '$http',
function($scope, $http) {
$scope.title = 'Our portfolio';
$scope.w = window.innerWidth;
$scope.h = window.innerHeight - 20;
$scope.uri = "http://lorempixel.com";
$scope.folders = [
'abstract',
'animals',
'business',
'cats',
'city',
'food',
'night',
'life',
'fashion',
'people',
'nature',
'sports',
'technics',
'transport'
];
$scope.images = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
$scope.currentFolder = $scope.folders[0];
$scope.selectFolder = function(folder) {
$scope.currentFolder = folder;
};
$scope.activeFolder = function(folder) {
return (folder === $scope.currentFolder) ? 'active' : '';
};
}
]);
here is the html file
<div class="container">
<!-- Carousel
================================================== -->
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" ng-repeat="img in images" class="{active : (img === 0)}" data-slide-to="{{img}}"></li>
</ol>
<div class="carousel-inner">
<div ng-class="{item: true, active : (img === 0)}" ng-repeat="img in images">
<img ng-src="{{uri}}/{{w}}/{{h}}/{{currentFolder}}/{{img}}" alt="Slide numder {{img}}">
<div class="container">
<div class="carousel-caption"></div>
</div>
</div>
</div>
<a class="left carousel-control" data-target="#myCarousel" role="button" data-slide="prev"><span class="glyphicon glyphicon-chevron-left"></span></a>
<a class="right carousel-control" data-target="#myCarousel" role="button" data-slide="next"><span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div>
<!-- /.carousel -->
<!-- Fixed navbar -->
<div class="navbar navbar-default navbar-fixed-botom" role="navigation">
<div class="container">
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li ng-repeat="folder in folders" class="{{activeFolder(folder)}}" ng-click="selectFolder(folder)"> <a ng-data-target="#{{folder}}">{{folder}}</a>
</li>
</ul>
</div>
<!--/.nav-collapse -->
</div>
</div>

Answer 1

If all you're trying to do is adapt that library to use your local folders you would just replace the uri with the base images folder or the like. Something like this.
$scope.uri = "path/to/my/images";
And your markup will reference the folders just the same:
<img ng-src="{{uri}}/{{currentFolder}}/{{img}}" alt="Slide numder {{img}}">
The width and height of the images will have to be formatted in the image itself or in css.

Answer 2

You can use this one. This is completely based on AngularJS and Bootstrap.
https://angular-ui.github.io/bootstrap/#/carousel