[DjDiablo]

Причём это можно даже на голом jQuery реализовать

не буду голословным.

в демки три компонента, все слабо связанны между собой. Для хардкора не испозованы даже хелперы.
Собственно это просто доказательство возможности, на angular это проблема конечно изящнее решается.
в демках UI я вообще не ивдел никогда декомпозиции, походу её там тупо нет.

всё описание использования и взаимодействия компонентов занимает 4 строчки.

<div id="contr1" class="controller">
  <menu data-source="imglist" select="selectitem"></menu>    
  <slide data-source="imglist" select="selectitem"></slide>
</div>

Роль контрола прежде всего в обепечение данными. Слайдер и меню независимы, и могут распространятся как jQuery
плагины, независимо друг от друга.

<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script>
	$(function(){    	

	    //================== плагин слайдера ===================//
	    $('slide').each(function(){
		  var me= $(this),
		      ds=me.attr('data-source'),
		      selItem=me.attr('select'),
			  scope=me.parent('.controller');
	
		  //применим шаблон
	      me.append('<ul class="Slideshow"></ul>');            	  
	
		  //слушаем изменения в data-source
		  scope.on('change-'+ds, function(){		  
			  $('li',me).remove();

		      scope.data(ds).forEach(function(img){
			  	$('ul',me).append('<img src="'+img+'" class="Slideshow_slide">');
			  })
		  })		

		  //слушаем изменения в selectItem
		  scope.on('change-'+selItem,function(){
			  me.find('img').removeClass('Slideshow_slide').addClass('Slideshow_slide_hide');	
			  me.find('img:eq('+scope.data(selItem) +')').removeClass('Slideshow_slide_hide').addClass('Slideshow_slide');		
		  })
  		
	    });   

	    //================== плагин меню ===================//

	    $('menu').each(function(){
		  var me= $(this),
		      ds=me.attr('data-source'),
		      selItem=me.attr('select'),
			  scope=me.parent('.controller');
	
		  //применим шаблон
	      me.append('<ul></ul>');            	  

		  //слушаем изменения в data-source 	
		  scope.on('change-'+ds,function(e){		  
		      scope.data(ds).forEach(function(img){
			  	$('ul',me).append('<li>'+img+'</li>');
			  })

			  me.find('li').click(function(e){
				scope.data(selItem, $(this).index() );
				scope.trigger('change-'+selItem);
			  })			  		
		  })
		  
	    });  
    

	    //================== контроллер ===================//

		$('#contr1').each(function(){
			var me=$(this);

			me.data('imglist',[
			   'http://cs402424.vk.me/v402424516/5f39/j9NEVbzaFho.jpg',
			   'http://cs540109.vk.me/c540101/v540101247/1e08/h5zYSV2a3C8.jpg',
			   'http://cs413921.vk.me/v413921890/1b63/q1lALPeD_9k.jpg',
			   'http://cs413921.vk.me/v413921890/1b52/gfODdvg3BeU.jpg',
			   'http://cs540109.vk.me/c540101/v540101247/1dfa/9tZrEKSJUPs.jpg',
			   'http://cs540109.vk.me/c540101/v540101247/1dec/IdbEO_5ghdE.jpg',
			   'http://cs417724.vk.me/v417724583/9737/OmJeOnhTQ9I.jpg'
		    ])   
		
			me.data('selectitem',0);

			//оповестим плагины об изменении данных
			me.trigger('change-imglist');	
			me.trigger('change-selectitem');	
		})			
	})                  

</script>

<style>
    .Slideshow {
      position    : relative;
      width       : 600px;
      height      : 400px;
      list-style  : none;
      padding     : 0;
      overflow    : hidden;
    }

    .Slideshow_slide_hide{
      position   : absolute;
      width      : 0%;
      left       : 50%;
      height     : 100%;
      transition : all 0.2s;
	}

    .Slideshow_slide {
      position   : absolute;
      width      : 100%;
      height     : 100%;
      transition : all 0.2s 0.2s;
    }

    li:hover {
      background-color : red;
      cursor           : pointer;
    }
</style>

<div id="contr1" class="controller">
  <menu data-source="imglist" select="selectitem"></menu>    
  <slide data-source="imglist" select="selectitem"></slide>
</div>