Using RESTful source instead of static JSON in AngularJS - angularjs

Question

I have the following code which displays a static JSON object in a grid.
var app = angular.module('app', ['ui.bootstrap']);
app.controller('ModalInstanceCtrl', function($scope, $modalInstance, customer) {
$scope.customer = customer;
});
app.controller('CustomerController', function($scope, $timeout, $modal, $log) {
$scope.customers = [{
name: 'Movie Title 1',
details: 'http://image.tmdb.org/t/p/w342//lFSSLTlFozwpaGlO31OoUeirBgQ.jpg',
}, {
name: 'Movie Title 2',
details: 'http://image.tmdb.org/t/p/w342//tgfRDJs5PFW20Aoh1orEzuxW8cN.jpg',
}, {
name: 'Movie Title 3',
details: 'http://image.tmdb.org/t/p/w342//wJXku1YhMKeuzYNEHux7XtaYPsE.jpg',
}];
// MODAL WINDOW
$scope.open = function(_customer) {
var modalInstance = $modal.open({
controller: "ModalInstanceCtrl",
templateUrl: 'myModalContent.html',
resolve: {
customer: function() {
return _customer;
}
}
});
};
});
I need to be able to use this RESTful API source:
$http.get("http://api.themoviedb.org/3/movie/now_playing?api_key=ebea8cfca72fdff8d2624ad7bbf78e4c")
.success(function(response) {
console.log(response);
$scope.results = response.results;
});
and enable the click event to trigger the modal as it does now, except it needs to grab the details of each of the items in the JSON object and display in the modal.
The ng-repeat:
<div class="container">
<div class="row">
<div ng-repeat="items in results">
<img class="col-lg-3 col-md-3 col-sm-3 col-xs-12 thumbnail" ng-src="http://image.tmdb.org/t/p/w342/{{items.poster_path}}">
</div>
</div>
</div>
Using this fiddle: http://jsfiddle.net/8s9ss/224/ as a base, I need to have the buttons replaced by the images coming through the REST API and they should trigger a modal on click.

Answer 1

This should be all you need
<div ng-repeat="items in results">
<a ng-click="open(items)" class="col-lg-3 col-md-3 col-sm-3 col-xs-12 thumbnail">
<img ng-if="items.poster_path" ng-src="http://image.tmdb.org/t/p/w342/{{items.poster_path}}">
<div class="caption" ng-hide="items.poster_path">
<h3>{{items.title}}</h3>
</div>
</a>
</div>
You'll need to tweak your modal template to show the different properties but you should be able to figure it out.
http://jsfiddle.net/8s9ss/229/