Binding List Item Names to Images

I want to list the names of the items in the module (name). I then want to click the name and have the corresponding image load. The first image should load automatically. Tried following this question to make work, but it's related to thumbnail pics. I believe i'm missing some code in the ng-repeat section. Thx!

How to bind the src of an image to ng-model and extract it in Angular?

HTML

<div ng-controller ="DemoController as main">

  <div>
  <img ng-src="{{selectedImg.src}}" />
  </div>
  <ul>
    <li ng-repeat="cat in main.cats">

        <img ng-src="{{cat.images[0].name}}"
        ng-click="selectedImg.src = cat.images[0].name"/>
        </li>
     </div>
   </ul>
</div>



   JS

angular.module('myApp',[]);

angular.module('myApp').controller('DemoController',
['$scope',function($scope) {

this.cats = [

   {
    name:  'Fluffy',
    images: 'images/Fluffy.jpeg'
   },
   {
     name: 'Tabby',
     images: 'images/tabby.jpeg'
   }
  ];
$scope.selectedImg = {};

}]);