Angular-slick external arrows

Question

How do you create external arrows with Angular Slick? The documentation doesn't really give a clue for it.

I already know how to do it with jQuery, but that's not quite the same since slick uses an actual tag in angular:

<p class="left">left</p>

$('.left').click(function(){
  $('.slider').slickPrev();
})

http://codepen.io/anon/pen/KwMZao

Answer 1

Credit goes here: https://github.com/vasyabigi/angular-slick/issues/55

The solution was actually pretty simple, match an attribute to an element:

<slick prev-arrow=".slick-prev" next-arrow=".slick-next">

and then for the arrows:

<button type="button" class="slick-prev"></button>
<button type="button" class="slick-next"></button>