Mauvaise redirection d'un carrousel

Bonjour,

Tout d'abord, je tiens à préciser que je suis en stage en entreprise,

héritant du travail laborieux d'ancien stagiaires, je dois apporter des modifications sur un des sites que l'entreprise utilise en interne,

Ayant que très peu de notion en Javascript / AngularJS, j'ai essayé de décortiquer le code afin de le comprendre.

Mon problème est le suivant : il existait un carrousel/slider d'image sur la page d'accueil, ainsi qu'une vidéo. La demande est de crée un carrousel des miniatures de ces vidéos (ce que j'ai réussi à faire), mais cependant, quand je clique sur une miniature elle devrait "ouvrir" la vidéo sur la page, le problème est que chaque miniature envoie vers la même vidéo.

<code>
<!--- Page d'accueil -->

<div class="col-lg-5 col-md-5 col-sm-6 col-xs-12 contVideo">
<div>
<div class="video" ng-controller="videoCtrl">
<slick class="carousel" infinite="true" settings="slickConfig">
<div ng-repeat="data in video" class="contentVideo" ng-style="{'background-image':'url({{data.miniature}})'}">
<a data-toggle="modal" data-target="#myModal">
<img ng-src="images/index/video/BoutonPlay.png" alt="Play" />
</a>
<div class="descriptionVideo">
<p>{{data.legende}}</p>
</div>
</div>
</slick>
<div class="modal fade" id="myModal" ng-repeat="data in video">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button ng-attr-type="button" class="close" data-dismiss="modal">x</button>
</div>
<div class="modal-body">
<video id="video1" ng-src="{{data.src}}" controls="controls" width="550px" height="300px" poster="{{data.miniature}}" preload="metadata"></video>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</code>

Page VideoCtrl.js

<code>
app.controller("videoCtrl", function($rootScope, $scope, $window) {

// INFORMATION GENERAL VIDEO
// legende = "resume" ou titre de la video
// src = adresse de la video
// miniature = background video
$scope.video = [
{
"legende": "CECI EST LA VIDEO 1",
"src": "images/index/video/video1.mp4",
"miniature": "images/index/video/videoMiniature.png"
},
{
"legende": "CECI EST LA VIDEO 2",
"src": "images/index/video/video2.mp4",
"miniature": "images/index/video/miniature2.png"
},
{
"legende": "CECI EST LA VIDEO 3",
"src": "images/index/video/video3.mp4",
"miniature": "images/index/video/miniature3.jpg"
}

];

// reinitialise le scroll au changement de vue
$rootScope.$on('$routeChangeSuccess', function() {
var interval = setInterval(function() {
if (document.readyState == 'complete') {
$window.scrollTo(0, 0);
clearInterval(interval);
}
}, 10000);
});

// Scope slider + img slider + config slider
$scope.slickConfig = {
prevArrow: '<img src="images/index/slider/prev.png"class="slick-prev"/>',
nextArrow: '<img src="images/index/slider/next.png"class="slick-next"/>',
autoplay: true,
draggable: true,
autoplaySpeed: 10000 //1000 egal 1 second
}
});
</code>

Ce que je voudrais c'est que chaque miniature renvoie vers la bonne vidéo, mais le hic c'est qu'elle renvoie toute sur la vidéo numéro 1

Il y a surement des erreurs et/ou des choses en trop, j'avoue avoir repris le code des anciens stagiaires qui avaient déjà fait un carrousel sur cette même page et essayé d'adapter au besoin,

Je reste disponible pour toutes questions,

Un grand merci à vous