How to do DOM manipulation in angular

Question

I need to develop an image slider. The image change automatically and can also be changed by clicking on left or right tab. I have done this using java script where i simply use display:block to show next or previous image while keeping display:none for the rest.

-I want to use angular for this, but i am not sure how and where to write the function which will be triggered when clicked on the left or right tab. -I have read articles saying DOM manipulation should be done in directives only. But how can i make a directive to be triggered only when a certain even happen?

The code is similar to this one.

  <div class="slideshow-container">

<div class="mySlides fade">
  <img src="img1.jpg" style="width:100%">
</div>

<div class="mySlides fade">
  <img src="img2.jpg" style="width:100%">
</div>

<div class="mySlides fade">
  <img src="img3.jpg" style="width:100%">
</div>

<a class="prev" onclick="plusDivs(-1)">&#10094;</a>
<a class="next" onclick="plusDivs(1)">&#10095;</a>

</div>

<script>

var slideIndex = 1;
showDivs(slideIndex);

function plusDivs(n) {
  showDivs(slideIndex += n);
}

function showDivs(n) {
  var i;
  var x = document.getElementsByClassName("mySlides");
  if (n > x.length) {slideIndex = 1}    
  if (n < 1) {slideIndex = x.length}
  for (i = 0; i < x.length; i++) {
     x[i].style.display = "none";  
  }
  x[slideIndex-1].style.display = "block";  

}
</script>
</body>