Javascript 简单画廊AngularJS

我做了一个简单的画廊。画廊是工作，但代码是非常糟糕的。 我想让代码通用化。我试图用cycle编写代码，但做不到。请帮忙

HTML:

---

谢谢，抱歉我的英语不好。

app.js

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

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

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

app.html

<image-gallery></image-gallery>

<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>

image gallery.html

<image-gallery></image-gallery>

<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>