I'm having the same problem. I looked at a list of all the Bootstrap3 classes here:
exhaustive list of Bootstrap3 classes
and there is no such class as "small-image". And, as far as I can tell, Bootstrap wouldn't use a class name like that anyway--instead Bootstrap uses class names like: "img-sm", "img-lg", etc. Yet, nothing like that exists in Bootstrap3.
That means the class name "small-image" was created by the tutorial--yet the index.html page does not link to any additional css files, e.g. app.css, that define what that class name does, and in the git repo there are no additional css files.
So...the tutorial is broken.
To get the large images to display as thumbnails, I used the width and height attributes of the img tag. The Bootstrap3 "thumbnail" class just puts a border around the image--it doesn't affect the size. For the thumbnail images, I just used random images I downloaded from the git repo here:
git repo
Here's my app.js:
(function() {
var app = angular.module('store', []);
app.controller('StoreController', function() {
this.products = gems;
});
var gems = [
{
name: 'Dodecahedron',
price: 2.00,
description: "Cool gem",
canPurchase: true,
soldOut: false,
images: [
'images/gem-01.gif',
'images/gem-03.gif',
'images/gem-05.gif',
]
},
{
name: 'Pentaconal Gem',
price: 5.95,
canPurchase: true,
soldOut: false,
images: [
'images/gem-02.gif',
'images/gem-04.gif',
'images/gem-06.gif',
]
}]
})()
Here's my index.html:
<body ng-controller="StoreController as store">
<div class="list-group">
<div class="list-group-item"
ng-repeat="product in store.products"
ng-hide="gem.soldOut">
<h3>{{product.name}}
<em class="pull-right">{{product.price | currency}}</em>
</h3>
<div>
<img ng-src="{{product.images[0]}}" class="pull-right" width="150" height="150">
</div>
<div>
<ul class="list-inline clearfix">
<li ng-repeat="img in product.images">
<img ng-src="{{img}}" class="pull-left thumbnail" width="50" height="50">
</li>
</ul>
</div>
<div>
<button type="button" class="btn btn-primary" ng-show="product.canPurchase"> Add To Cart </button>
</div>
</div>
</div>
<script src="js/angular.js"></script>
<script src="js/app.js"></script>
</body>
</html>
Note that in my project directory, I have sub directories named js/, css/, and images/. Also, I was unable to use the minified version of Bootstrap because it was causing 'map' errors.
Later, you will need to add some css to get the default tab to show its active state correctly, like in the video. I added a css/app.css file to my project, which contains the following css:
.nav-pills > li.active > a,
.nav-pills > li.active > a:hover,
.nav-pills > li.active > a:focus {
color: #555555;
background-color: orange;
}
...which applies to this html:
<ul class="nav nav-pills">
<li ng-class="{active: tab.isActiveTab(1)}">
<a role="presentation" href="#" ng-click="tab.setTab(1)">Description</a>
</li>
You'll need to link to css/app.css after the Bootstrap css.