how to show api data with angularJs in html

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/