angularjs slick js carousel ng-click not firing with responsive attribute settings

Question

I'm using the angular wrapper https://github.com/vasyabigi/angular-slick to use the slick slider.

I have a ng-click setup on my individual slides that will take users to a different page when clicked. I using the responsive attribute setup.

When the view first loads with the slider, everything works correctly. I can click the hyperlink and receive the click event. However, if I change the size of the browser window that triggers one of the breakpoint settings, then the ng-click events no longer gets fired.

I think the issue has to do with the destroy and redraw logic that the slick framework is doing under the covers when a breakpoint is reached.

How do I re-initialize angular to watch for ng-click events after a responsive breakpoint has been hit?

http://plnkr.co/edit/FCeE8AejXsjxWh6WR1wd

The view:

<h2>Single Item</h2>
    <slick class="slider single-item" data="this" current-index="index" responsive="breakpoints" slides-to-show=3 slides-to-scroll=3>
        <div ng-repeat="i in [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15]">
            <h3>{{ i }}</h3>
            <a ng-click="clickTheThing(i)" style="color:blue;">Click Here</a>
        </div>
        <p>Current index: {{ index }}</p>


    </slick>

The controller:

$timeout(function () {
        return $scope.awesomeThings = ['HTML5', 'AngularJS', 'Karma', 'Slick', 'Bower', 'Coffee'];
    }, 1000);


    $scope.clickTheThing = function(theIndex) {
        console.log('clicked index' + theIndex);
        alert('clicked index' + theIndex);
    }

    return $scope.breakpoints = [
      {
          breakpoint: 768,
          settings: {
              slidesToShow: 2,
              slidesToScroll: 2
          }
      }, {
          breakpoint: 480,
          settings: {
              slidesToShow: 1,
              slidesToScroll: 1
          }
      }
    ];

Answer 1

I have a working solution for it. It is very yet fresh though but worth sharing.

So in my directive I have my template as (jade):

ul.discover-menu
  li(ng-repeat='tile in tiles')
    a(data-id='{{tile[0]}}', ng-class='{active: (id && id == tile[0])}')
      div
      h6 {{tile[2]}}

instead of attaching ng-click to a tile button, an attribute with something is being given (in this case the id of the element) you want to pick up afterwards and pick it up with in the directive;

  $timeout(function () {
    el.slick({
      dots: false,
      arrows: true,
      infinite: false,
      speed: 300,
      slidesToShow: 4,
      slidesToScroll: 1,
      swipeToSlide: true,
      responsive: [
        // 2
        {breakpoint: 330, settings: {slidesToShow: 2, slidesToScroll: 2}},
        {breakpoint: 495, settings: {slidesToShow: 3, slidesToScroll: 2}},
        {breakpoint: 660, settings: {slidesToShow: 3, slidesToScroll: 2}},
        {breakpoint: 825, settings: {slidesToShow: 4, slidesToScroll: 2}},
        {breakpoint: 990, settings: {slidesToShow: 5, slidesToScroll: 2}},
        // 3
        {breakpoint: 1155, settings: {slidesToShow: 6, slidesToScroll: 3}},
        {breakpoint: 1320, settings: {slidesToShow: 7, slidesToScroll: 3}},
        {breakpoint: 1485, settings: {slidesToShow: 8, slidesToScroll: 3}},
        {breakpoint: 1650, settings: {slidesToShow: 9, slidesToScroll: 3}},
        {breakpoint: 1815, settings: {slidesToShow: 10, slidesToScroll: 3}},
        // 4
        {breakpoint: 1980, settings: {slidesToShow: 11, slidesToScroll: 4}},
        {breakpoint: 2145, settings: {slidesToShow: 12, slidesToScroll: 4}}
      ]
    });

    $(function () {
      $('a[data-id]').on('click', function () {
        console.log('link executed', $(this).data('id'));
      });
    });

  });

It is more or less implemented version of http://jsfiddle.net/c5dmpzbt/