I've been trying out AngularJS by creating a simple gallery that gets images from a json file, but somehow I can't seem to display the data.
index.html:
<!DOCTYPE html>
<html ng-app="portfolioApp">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.4/angular.min.js"></script>
<script src="app.js"></script>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div ng-controller="GalleryController" >
<ul>
<li ng-repeat="image in gallery.galleryData">
<a ng-href="">{{image.IMAGE_WIDTH}}
<img class="thumbnail" ng-src="{{IMAGE_LOCATION+image.image}}" />
</a>
</li>
</ul>
</div>
</body>
</html>
app.js:
var app = angular.module('portfolioApp',[]);
app.controller('GalleryController',['$http', function($http){
var gallery = this;
gallery = [];
gallery.IMAGE_WIDTH = 405;
gallery.IMAGE_LOCATION = "http://rabidgadfly.com/assets/angular/gallery1/";
$http.get("images.json").success(function(data){
gallery.galleryData = data;
});
}]);
I think the issue has something to do with the scope of the gallery variable, but i'm not sure: http://i.stack.imgur.com/VBGku.png
images.json
contains?