how to show api data with angularJs in html - angularjs

Question

Hello i have the following code and i want to show the objects that the api returns in to my html but i am drawing a blank on this, also i want to make a filter to sort by id.
angular.module('MainApp').controller('PhoneController', function ($scope, $http) {
$scope.home = "This is the homepage";
$scope.getRequest = function () {
console.log("I've been pressed!");
$http.get("http://api.myjson.com/bins/12qiaa")
.then(function successCallback(response) {
$scope.response = response;
console.log(response.data.galerija);
var row0 = response.data.galerija[0];
var row1 = response.data.galerija[1];
var row2 = response.data.galerija[2];
var row3 = response.data.galerija[3];
var row4 = response.data.galerija[4];
var row5 = response.data.galerija[5];
}, function errorCallback(response) {
console.log("Unable to perform get request");
});
};

Answer 1

To populate your html you will have to bind your modal to the view. Angular uses handlebar syntax.
First thing is to declare your model, let's say $scope.galerijas, then after your $http GET request you will populate response to your $scope.galerijas model.
Finally we will use ng-repeat to loop over $scope.galerijas and bind it to the view. A filter | is used to order the displayed results by id.
Sample Html
<div ng-app="MainApp" ng-controller="PhoneController">
<h2>{{ home }}</h2>
<ul>
<li ng-repeat="x in galerijas | orderBy:'id'">
<figure class="figure">
<img src="{{ x.slika }}" class="figure-img img-fluid rounded" alt="{{ x.naziv }}">
<figcaption class="figure-caption text-right">{{ x.naziv }}</figcaption>
</figure>
</li>
</ul>
<button type="button" ng-click="getRequest()">Get Galerija</button>
</div>
Sample Script
var app = angular.module("MainApp", []);
app.controller("PhoneController", function($scope, $http) {
$scope.home = "This is the homepage";
$scope.galerijas = []; // This will hold all our galerija after ajax request;
$scope.getRequest = function() {
console.log("I've been pressed!");
$http.get("https://api.myjson.com/bins/12qiaa")
.then(function successCallback(response) {
console.log(response.data.galerija);
$scope.galerijas = response.data.galerija; // populate from api;
}, function errorCallback(response) {
console.log("Unable to perform get request");
});
console.log($scope.galerijas);
}
});
And here is an example fiddle: https://jsfiddle.net/tbxmfarz/3/