Convert jQuery slick.js to angularjs directive -

i trying convert jquery angularjs directive, don't know doing wrong in code below, can tell doing wrong? new angular , dont understand why code not working?

html:

<div class="slider">   <div class="slide-block">     <i class="fa fa-lg fa-exchange"></i>     <h4>1</h4>   </div>   <div class="slide-block">     <i class="fa fa-lg fa-exchange"></i>     <h4 > 2</h4>   </div> </div> 

js:

angular.module('components').directive('slick', [       'jquery',       function slick($) {         'use strict';          var           scope = {};          function link($scope, $element) {                 $('.slider').slick({           centermode: false,           infinite: false,           centerpadding: '2px',           slidestoshow: 6,           speed: 200,           index: 2,            variablewidth: true,           responsive: [{             breakpoint: 768,             settings: {               arrows: false,               centermode: true,               centerpadding: '40px',               slidestoshow: 3             }           }, {             breakpoint: 480,             settings: {               arrows: false,               centermode: true,               centerpadding: '40px',               slidestoshow: 1             }           }]         });          }          return {           restrict: 'a',           scope: scope,           templateurl: 'slick.html',           link: link         };       }     ]); 

there couple of angular modules this. check them out!

https://github.com/vasyabigi/angular-slick
https://github.com/devmark/angular-slick-carousel