Slick Carousel from JSON

HTML

<link rel="stylesheet" href="https://cdn.rawgit.com/kenwheeler/slick/master/slick/slick.css">
<script src="http:////ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://cdn.rawgit.com/kenwheeler/slick/master/slick/slick.min.js"></script>
<script src="https://cdn.rawgit.com/vasyabigi/angular-slick/master/dist/slick.min.js"></script>
<div ng-app="slickExampleApp">
<div ng-controller="SlickCtrl">
    
    <slick slides-to-show="1" slides-to-scroll="1" init-onload="true" infinite="false" autoplay="true" onAfterChange="slideChange()" data="awesomeThings" id="slidesCarousel">
      <div ng-repeat="thing in https://jsfiddle.net/cunigarrod/xnux008L/#runawesomeThings" class="{{thing.media$group.media$category[0].label}}">
          <img ng-src="{{ thing.media$group.media$thumbnail[0].url }}" alt="" />
          {{thing.media$group.media$category[0].label}}
     </div>
    </slick>
    
      <div ng-repeat="category in categories">
          <a href="" ng-click="slideFilter(category)">{{ category }}</a>
     </div>
     <a href="" ng-click="slideClear()">Clear</a>

</div>
</div>

CSS

.auto {
    width:200px;
}
.slick-slider{
    margin-bottom:0;
    padding:26px 0;
}
.slick-slide{
    text-align:center;
    padding: 6px 0;
    border-bottom:1px dashed #999 !important;
}
.slick-slide img{
    width: 100%;
}
.slick-prev:active, .slick-prev:hover, .slick-prev:focus, .slick-next:active, .slick-next:hover, .slick-next:focus {
   background-color:#DDD;
}
.slick-prev{
    border-bottom:1px solid #AAA;
    position:absolute;
    top:0;
    left:0;
    width:100%;
    margin-top:0;
    height:28px;
    background-color:#DDD;
}
.slick-next{
    width:100%;
    border-top:1px solid #AAA;
    position:absolute;
    bottom:0;
    right:0;
    top:auto;
    height:28px;
    background-color:#DDD;
}

JavaScript

var app = angular.module('slickExampleApp', ['slick']);

app.controller('SlickCtrl', function ($scope, $timeout, $http) {
    $scope.slideFilter = function(cat) {
        $('#slidesCarousel').slickGoTo(1);
        $('#slidesCarousel').slickFilter('.'+ cat);
    }
    $scope.slideClear = function(cat) {
        $('#slidesCarousel').slickUnfilter();
    }
    $scope.slideChange = function() {
        alert('change')
    }

$timeout(function() {
    
    $http.get('http://gdata.youtube.com/feeds/api/standardfeeds/most_popular?v=2&alt=json').success(function(data) {
        $scope.awesomeThings = data.feed.entry;
        console.log($scope.awesomeThings);
        // need unique categories
        var categories = [];
        $.each(data.feed.entry, function(index, value) {
            if ($.inArray(value.media$group.media$category[0].label, categories) === -1) {
                categories.push(value.media$group.media$category[0].label);
            }
        });
        $scope.categories = categories;
        
    }).error(function(data) {
        alert('cannot fetch youtube API');
    });
    
}, 2000);  

});