AngularJS Thumbnails from a JSON file does not load; how to display a large image by clicking on a thumbnail

Question

I am using AngularJS to read image data from a JSON file that works.

Then I need to load all the thumbnail images into the gallery div and fill in the src, alt and title attributes of the image data that I read using ng-repeat, however this will not work. Therefore, the sketch does not load. What happened?

Then, when you click on any of the thumbnails, a normal sized image should appear in the mainImg div. I'm not sure how code customization works?

This is my code -

HTML

<!-- regular image display area -->
<div class="mainImg"> <!-- Regular image area  -->
    <img class="large" id="changer" src="images/bird.jpg" />
    <p id="imgMsg">Bird fly.</p>
</div>

<!-- thumbnail area -->
<div class="gallery" ng-repeat="img in images">
     <img class="thumb" ng-src="{{ img.thumbnail }}" alt="{{ img.image }}" title="{{ img.msg }}" ng-click="showImage()" />
</div>

json file

    {
        "images": [
            {
                "thumbnail": "images / bird-thumb.jpg",
                "image": "images / bird.jpg",
                "msg": "Bird fly."
            },{
                "thumbnail": "images/duck-thumb.jpg",
                "image": "images/duck.jpg",
                "msg": "Duck swim."
            },
            {
                "thumbnail": "images/bear-thumb.jpg",
                "image": "images/bear.jpg",
                "msg": "Bear hug."
            },
            {
                "thumbnail": "images/dog-thumb.jpg",
                "image": "images/dog.jpg",
                "msg": "dog bark."
            }
        ]
    }

AngularJS

    var myApp = angular.module('imgApp', []);

    mgApp.controller('imageController', ['$scope', '$http', function ($scope, $http) {
      'use strict';
      $scope.images = [];

      $http.get('data/images.json').success(function (data) {
        $scope.images = data;
        console.log($scope.images);
      });

      $scope.showImage = function () {
        $(".thumb").click(function () {
            //Get that image altSrc attribute value
            var alt = $(this).attr("alt");
            // Get the alt value for the thumbnail
            var msg = $(this).attr("title");

            //Set the main images src to that value
            $("#changer").attr("src", altSrc);
            // set the main images caption to that value
            $("#imgMsg").text(msg);
        });
    }]);

Answer 1

showImage , $modal.open , ,

<!-- thumbnail area -->
<div class="gallery" ng-repeat="img in images">
     <img class="thumb" ng-src="{{ img.thumbnail }}" alt="{{ img.image }}" title="{{ img.msg }}" ng-click="showImage(img)" />
</div>


$scope.showImage = function (img) {
    $modal.open({
        templateUrl: 'templates/image.html',
        size: "sm",
        controller: ['$scope',
            function(scope) {
                scope.entity = img;

            }
        ]
    });
);

image.html

<!-- regular image display area -->
<div class="mainImg"> <!-- Regular image area  -->
    <img class="large" id="changer" ng-src="{{entity.thumbnail}}" />
    <p id="imgMsg">{{ entity.msg }}</p>
</div>