title: AngularJS Thumbnails from JSON file would not load; how to display large image by clicking on thumbnail
body: <p>I am using AngularJS to read image data from a JSON file, which works. </p>
  
  <p>Next, I need to load all the thumbnail images to the gallery div and populate the src, alt, and title attributes of the image data I read in using ng-repeat, however it does not work. Thus, no thumbnail is loaded. What happen?</p>
  
  <p>Then, when click on any of the thumbnails, the regular size image should be displayed on the mainImg div. I am not sure the way the code is setup works?</p>
  
  <p>These are my code-</p>
  
  <p>HTML 
  </p>
  
  <pre><code>&lt;!-- regular image display area --&gt;
  &lt;div class="mainImg"&gt; &lt;!-- Regular image area  --&gt;
      &lt;img class="large" id="changer" src="images/bird.jpg" /&gt;
      &lt;p id="imgMsg"&gt;Bird fly.&lt;/p&gt;
  &lt;/div&gt;
  
  &lt;!-- thumbnail area --&gt;
  &lt;div class="gallery" ng-repeat="img in images"&gt;
       &lt;img class="thumb" ng-src="{{ img.thumbnail }}" alt="{{ img.image }}" title="{{ img.msg }}" ng-click="showImage()" /&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p></p>
  
  <p>json file </p>
  
  <pre>
  
      {
          "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."
              }
          ]
      }
  
  </pre>
  
  <p>AngularJS</p>
  
  <pre>
  
      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's 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);
          });
      }]);
  
  </pre>