[AngularJS] Ajouter classe par clic, à l'intérieur de ng-repeat

Bonjour,

J'essaie de me mettre à AngularJS et pour celà j'essaie de transformer un peu mon site.
J'ai sur mon site une liste de sites web que j'ai fait. Lors d'un clic sur un site, ça ajoute une classe dans une autre div cachée pour la faire apparaître avec des effets CSS définis par la classe CSS, lorsqu'elle est ajoutée ou enlevée. Tout ça est géré à la base par JQuery.

Maintenant, j'ai essayé de remplacer ces div par une unique div répétée par un ng-repeat. Tout a marché sauf le système de clic géré par JQuery. Il faut donc aller plus loin.

Voici mon code :
1) ma div avec le ng-repeat qui montre les sites web

<div ng-controller="WebsitesController as portfolioWebsites" class="content">
	<ul class="grid cs-style-1">
		<li ng-repeat="website in portfolioWebsites.items">
			<figure>
				<img data-src="img/{{website.img}}" data-effect="fadeInUp" alt="{{website.imgAlt}}">
				<figcaption>
					<div class="figcaption-container-inside">
						<div class="element-title">{{website.title}}</div>
						<div class="element-description-1">{{website.description}}</div>
						<div class="element-description-2">{{website.date}}</div>
						<button type="button" class="btn btn-dead coming-soon lang" ng-click="showLightDialog(website.dialog)"></button>
					</div>
				</figcaption>
			</figure>
		</li>
	</ul>
</div>

2) Mon code AngularJS qui définit chaque élément de la boucle ng-repeat:

app.controller('WebsitesController', function() {
	this.items = websites;
});

var websites = [
	{
		title: "LightWolf Studios",
		description: "Our new website [smile]",
		date: 2014,
		img: "portfolio-lightwolf-studios-2014.png",
		imgAlt: "Portfolio - LightWolf Studios",
		dialog: "$('#lightDialog9')",
	},
	{
		title: "Les Zappings",
		description: "Spectacle for children",
		date: 2011,
		img: "portfolio-zappings.png",
		imgAlt: "Portfolio - Les Zappings",
		dialog: "$('#lightDialog1')",
	}
];

3) Mon code qui fait apparaitre les pop in par clic:

function showLightDialog(selectedDialog) {
	$(selectedDialog).removeClass('dialog-hidden').addClass('dialog-shown');
	$('.hide-website').removeClass('dialog-hidden').addClass('dialog-shown');
}

4) Le code d'une pop in:

<!-- Light dialog 1 START -->
<div ng-controller="PopinsController as popinApp" class="light-dialog website-portfolio dialog-hidden" id="lightDialog1">
	<div class="line line-top">
		<div class="container-mini">
			<div class="line-top-logo"><img src="img/site-logo-black.png" alt="LightWolf Studios" /></div>
			<div class="line-top-controls">
				<div class="light-dialog-previous"><a href="#">&nbsp;</a></div>
				<div class="light-dialog-next"><a href="#">&nbsp;</a></div>
				<div class="light-dialog-close close-btn">&nbsp;</div>
			</div>
		</div>
	</div>
	<div class="line line-title">
		<div class="container-mini">
			<div class="title-category">{{popinApp.popin.category}}</div>
			<div class="title-title">{{popinApp.popin.title}}</div>
		</div>
	</div>
	<div class="line line-light line-content container-mini">
		<div class="content-video">
			<iframe width="1280" height="720" data-src="https://www.youtube.com/embed/F6sC_B0ZTto" frameborder="0" allowfullscreen></iframe>
		</div>
		<div class="content-description">
			<div class="description-title">{{popinApp.popin.descriptionTitle}}</div>
			<div class="description-content lang" id="dialog1Description"></div>
			<div class="description-link"><a href="http://www.spectacle-enfant-zapping.fr" target="_blank" class="link-website lang"></a></div>
		</div>
	</div>
</div>
<!-- Light dialog 1 END -->

La première question c'est : comment remplacer le code 3 par du code AngularJS? En gros, comment remplacer div1.click(function() { div2.addClass("maClasse"); }) par du AngularJS (c'est à dire ajouter une classe sur un élément B par clic sur un élément A) ?

Merci =)
Modifié par LightBen (06 Jul 2014 - 15:03)

Petit UP...

Pour ceux qui auraient du mal à lire tout ça, en simplifié, ce qui m'aiderait beaucoup ça serait la dernière partie du message :

En gros, comment remplacer div1.click(function() { div2.addClass("maClasse"); }) par du AngularJS (c'est à dire ajouter une classe sur un élément B par clic sur un élément A) ?

Merci =)