Simple Gallery AngularJS

Question

I made a simple gallery. Gallery is work But the code is very bad. I want make the code universal. I tried to do code with cycle, but can't. Please help.

HTML:

<ul class="catalog">
    <li><img src="1.png"></li>
    <li><img src="2.png"></li>
    <li><img src="3.png"></li>
</ul>
<div class="main">
    <img src="1.png">
</div>

JS:

var main = angular.element(document.querySelector(".main"))
var catalog = angular.element(document.querySelector(".catalog"));
var catlalogItems = catalog.find("img");

var firstItem = catlalogItems.eq(0)
firstItem.on('click',function(){
    main.attr('src',(firstItem.attr('src')));
});

var secondItem = catlalogItems.eq(1)
secondItem.on('click',function(){
    main.attr('src',(secondItem.attr('src')));
})

var thirdItem = catlalogItems.eq(2)
thirdItem.on('click',function(){
    main.attr('src',(thirdItem.attr('src')));
})

Thank, Sorry for my bad English.

Answer 1

app.js

(function () {
  angular.module('app', []);
}());

app.html

<image-gallery></image-gallery>

image-gallery.js

(function () {
  var imageGallery = {
    constroller: function () {
      this.urls = ['1.png', '2.png', '3.png'];
    },
    templateUrl: './images-template.html'
  };

  angular.module('app')
    .component('imageGallery', imageGallery)
}()); 

image-gallery.html

<ul class="catalog">
    <li ng-repeat="url in $ctrl.urls">
      <img ng-src="url" ng-click="$ctrl.selectedUrl = image">
    </li>
</ul>
<div class="main">
    <img ng-src="$ctrl.selectedUrl">
</div>