title: Multiple angular directives for slick slider
body: <p>I need some assistance getting Ken Wheeler slick.js to work in angular implementation.</p>
  
  <p>I read a similar thread here where someone had an issue and I am able to implement that solution. But it only partly helped..</p>
  
  <p>I want the display 2 sliders, where 1 has the image and the other has information based on the image. This requires 2 elements of different names and the instance of each element needs to communicate with the other.</p>
  
  <p>I'm thinking this requires 2 directives that need the share the same scope. I created an parent directive and 2 child directives with the requirement to access the parent directive. </p>
  
  <p>When I test the file, angular issues a compile error 
  "Error: [$compile:ctreq] <a href="http://errors.angularjs.org/1.5.8/" rel="nofollow">http://errors.angularjs.org/1.5.8/</a>$compile/ctreq?p0=slickSlider&amp;p1=infoSlider</p>
  
  <p>From the doc, the infoSlider cannot see the slickSlider controller. But I do not see why. If I strip out the controller reference and the html config it works.</p>
  
  <p>Any direction will be appreciated thanks.</p>
  
  <pre><code>.directive('slickSlider', function(){
  
  
      return{
  
  
              controller:function($scope){this.scope=$scope;}
  
  
      };  
  })
  .directive('navSlider', function($timeout){
  
  
      return{
          restrict: 'A',
          require:'^slickSlider',
          link: function(scope,element,attrs,slickSlider) {
                  $timeout(function() {
                      $(element).slick(scope.$eval(attrs.navSlider));
                  },50)
          }
  
      };
  })
  .directive('infoSlider', function($timeout){
      return{
          restrict: 'A',
          require:'^slickSlider',
          link: function(scope,element,attrs,slickSlider) {
                  $timeout(function() {
                      $(element).slick(scope.$eval(attrs.infoSlider));
                  },50)
              }
  
      };
  })
  
  &lt;div nav-slider ="{
                  centerPadding: '40px',
                  slidesToShow: 2,
                  slidesToScroll: 2,
                  sNavFor: '.slider-for',
                  dots: true,
                  centerMode: true,
                  focusOnSelect: true
              }" &gt;
              &lt;div class="slider-nav" ng-repeat="category in catProducts"&gt;
  
                     &lt;div&gt;&lt;img src="{{category.placehldr}}" /&gt;&lt;/div&gt;     
  
  
              &lt;/div&gt;&lt;br /&gt;        
      &lt;div info-slider ="{
                  slidesToShow: 1,
                  slidesToScroll: 1,
                  arrows: false,
                  fade: true,
                  asNavFor: '.slider-nav'
  
              }" &gt;
              &lt;div class="slider-for" ng-repeat="category in catProducts|orderBy:category.productID"&gt;
  
                     &lt;div&gt;&lt;img src="{{category.placehldr}}" /&gt;&lt;/div&gt;     
  
  
              &lt;/div&gt;
  </code></pre>