Bootstrap-UI local images not showing - angularjs

Question

I'm using AngularJS with Bootstrap-UI and I'm using the carousel directive. When I have the images in my Ctrl pointing to a website (lorumpixel.com) the images are appearing; however, I have images that I want to place into the site.
<div ng-controller="CarouselCtrl">
<div carousel interval="3000">
<div slide ng-repeat="slide in slides" active="slide.active">
<img ng-src="{{slide.image}}">
<div class="carousel-caption animated slideInLeft">
<h2>Slide {{$index}}</h2>
<p>{{slide.text}}</p>
</div>
</div>
</div>
</div>
and my Controller
'use strict';
angular.module('angularApp')
.controller('CarouselCtrl', function ($scope) {
$scope.slides = [];
$scope.slides.push({text: '', image: 'images/bg-2.jpg'});
$scope.setActive = function(idx) {
$scope.slides[idx].active=true;
};
});
I'm hoping to get this website up by the end of the week so any help is greatly appreciated. Thanks in advance.

Answer 1

roof.controller.js
angular.module('monsterApp').controller('CarouselCtrl', function ($scope) {
$scope.myInterval = 5000;
$scope.noWrapSlides = false;
var slides = $scope.slides = [];
$scope.addSlide = function() {
var newWidth = 1500 + slides.length + 1;
slides.push({
url: "http://res.cloudinary.com/dqa0blkfn/image/upload/v1436283760/monster-head_tnxloc.jpg",
/* url: '//placekitten.com/' + newWidth + '/300', */
text: [' ',' ',' ',' '][slides.length % 4] + ' ' +
[' ', ' ', ' ', ' '][slides.length % 4]
});
};
roof.html
<div ng-controller="CarouselCtrl">
<div style="height: 305px">
<carousel interval="myInterval" no-wrap="noWrapSlides">
<slide ng-repeat="slide in slides" active="slide.active">
<img ng-src="{{slide.url}}" style="margin:auto;">
<div class="carousel-caption">
<h4>Slide {{$index}}</h4>
<p>{{slide.text}}</p>
</div>
</slide>
</carousel>
</div>
<div class="row">
<div class="col-md-6">
<button type="button" class="btn btn-info" ng-click="addSlide()">Add Slide</button>
<div class="checkbox">
<label>
<input type="checkbox" ng-model="noWrapSlides">
Disable Slide Looping
</label>
</div>
</div>
<div class="col-md-6">
Interval, in milliseconds: <input type="number" class="form-control" ng-model="myInterval">
<br />Enter a negative number or 0 to stop the interval.
</div>
</div>
</div>