directive.js

angular.module('myApp.directives.mySlickCarousel', [])
  .controller('CarouselController', function () {
    // stuff
  })
  .directive('priorityNotifications', function () {
    return {
      restrict: 'E',
      templateUrl: 'template.html',
      replace: true,
      controller: 'CarouselController as carouselCtrl',
      scope: {
        notifications: '='
      },
      bindToController: true
    };
  });

template.html

<div class="priority-notifications">
  <slick class="card" data="carouselCtrl.notifications" infinite="true" dots="true">
    <div class="item item-text-wrap"
         ng-repeat="n in carouselCtrl.notifications track by $index">
      <span ng-bind-html="n.message"></span>
    </div>
  </slick>
</div>