angular-slick-carousel demo.

<!DOCTYPE html>
<html>

<head>
  <script data-require="jquery@*" data-semver="2.1.4" src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
  <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.5.8/slick.css" />
  <script src="//cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.5.8/slick.min.js"></script>
  <script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.3/angular.min.js"></script>
  <script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.3/angular-route.min.js"></script>
  <script src="//rawgit.com/devmark/angular-slick-carousel/master/dist/angular-slick.js"></script>
  <link rel="stylesheet" href="style.css" />
  <script src="script.js"></script>

</head>

<body ng-app="app">

  <div class="container" ng-controller="SlickController">
     <slick class="slider slider-nav" settings="slickConfigSliderNav" ng-if="viewLoaded" >
       <div ng-repeat="view in viewData">
        <div class="slide slide-4">
          <div>{{view.text}}</div>
          <p>{{view.property}}</p>
        </div>
      </div>
    </slick>
    <hr>
    <slick class="slides slider-for" data="viewData" dots="true" ng-if="viewLoaded" settings="slickPanels">
      <div ng-repeat="view in viewData">
        <div class="slide slide-4">
          <div>{{view.text}}</div>
           <p>{{view.property}}</p>
        </div>
      </div>
    </slick>
     <hr>
    <button ng--click="updateView()">
      Update View
    </button>
  

  </div>
</body>

</html>

// Code goes here

(function() {
  "use strict";
  angular.module('app', [
    'slickCarousel'
  ]);

  function SlickController($rootScope, $window, $location, $scope, $timeout, $compile) {

    var vm = this;
    $rootScope.viewData = [{
      text: "My View1",
      property: 0
    }, {
      text: "My View2",
      property: 0
    }, {
      text: "My View3",
      property: 0
    }];
    $rootScope.viewLoaded = true;

    $rootScope.updateView = function() {
      $rootScope.viewLoaded = false;
      $rootScope.viewData.push({
        text: "My View" + $rootScope.viewData.length
      });
      $timeout(function() {
        $rootScope.viewLoaded = true;
        
      });
    };
    
     $scope.slickConfigSliderNav = {
      method: {},
      speed: 300,
      slidesToShow: 1,
      slidesToScroll: 1,
      arrows: false,
      centerMode: true,
      variableWidth: true,
      asNavFor: '.slider-for',
      focusOnSelect: true,
      infinite: false
    }

    $scope.slickPanels = {
      method: {},
      dots:false,
      infinite: false,
      slidesToShow: 1,
      slidesToScroll: 1,
      asNavFor: '.slider-nav',
      autoPlay: false,
      adaptiveHeight: true,
      event: {
        beforeChange: function() {
          console.log("before change called");
        },
        afterChange: function() {
          console.log("after called");
        }
      }
    };

  }
  SlickController.$inject = ["$rootScope", "$window", "$location", "$scope", "$timeout", "$compile"];

  angular
    .module('app')
    .controller('SlickController', SlickController);
})();

/* Styles go here */

.slides {
  background-color: #eee;
}

.slide {
  color: #fff;
  /* width: 25%; */
  /* height: 120px; */
  font-size: 20px;
  line-height: 150px;
  text-align: center;
}

.slide-1 {background-color: red;}
.slide-2 {background-color: blue;}
.slide-3 {background-color: green;}
.slide-4 {background-color: orange;}

.slide p {
  color: #fff;
}