AngularJS Album

Need to work on the JSONP bit but the ideas are all in place.

HTML

<script src="http://code.angularjs.org/angular-1.0.0rc4.min.js"></script>
<script src="http://documentcloud.github.com/underscore/underscore-min.js"></script>
<!DOCTYPE HTML>
<html ng-app>
<body>
<div ng-controller="AlbumCtrl">
    <div id="header">
        <h2>{{currentImage.description}}</h2>
    </div>

    <div id="albumImage">
        <img ng-src="{{currentImage.image}}" alt="{{currentImage.description}}">
    </div>
    
    <div id="thumbWrapper">
        <ul id="thumbList">
            <li ng-repeat="image in images" ng-click="setCurrentImage(image)">
                <img ng-src="{{image.thumbnail}}" alt="{{image.description}}">
            </li>
        </ul>
    </div>
</div>
</body>
</html>

CSS

#header {
    position: relative;
    width: 620px;
}

#albumImage {
    width: 620px;
    margin-bottom: 10px;
}

#albumImage img {
    display: block;
    margin: auto;
}

#thumbWrapper {
    width: 620px;
    overflow: auto;
}

#thumbList {
    white-space: nowrap;
    margin: 0px;
}

#thumbList li {
    display: inline;
    list-style-type: none;
    padding-left: 2px;
    padding-right: 2px;
    cursor: pointer;
}

#thumbList li:hover {
    opacity: 0.5;
}

JavaScript

function AlbumCtrl($scope, $http) {
    $scope.url = 'https://api.flickr.com/services/feeds/photos_public.gne';
    $scope.images = [];
    $scope.imageCategories = [];
    $scope.currentImage = {};

    function handleImagesLoaded(data, status) {
        $scope.images = data;
        $scope.currentImage = _.first($scope.images);
        $scope.imageCategories = _.uniq(_.pluck($scope.images, 'category'));
    }

    $scope.fetch = function () {
        $http.get($scope.url).success($scope.handleImagesLoaded);
    }

    $scope.setCurrentImage = function (image) {
        $scope.currentImage = image;
    };

    $scope.fetch();
}