title: Using jQuery Light slider with angular?
body: <p>I am missing something that does not allow me to add <code>ng-click</code> to the slider items. When i add ng-click it just does not fire a click event, but if I do onClick it fires. Now that makes me think it has to do with angular scopes but I can tell. </p>
  
  <p>Edit:</p>
  
  <p>Here is some code:</p>
  
  <pre><code>     JS
  
  angular.module('sweetItemsDirective',[]).directive('sweetItemsDirective',
  ['$interval', '$q',
   function($interval, $q) {
      return {
       restrict: 'EA', 
       transclude: true,
       scope: {
        items           : '&amp;',
       },
       templateUrl: '/templates/items/default.html',
       controller: ['$scope', function($scope) {
         // some controller code goes here
          $scope.items = function(){
             return $scope.items;
          }
  
       }], //Embed a custom controller in the directive
       link: domManipulation
      }
        function domManipulation(scope, element, attrs) {
  
           scope.items = // returned json from API;
           function createSlider(){
            try{
             scope.itemsSlider.destroy();
            }catch (error){
             console.log(error);
            }
            scope.itemsSlider = $('#items').lightSlider({
             item    : 10,
             autoWidth: false,
             slideMove: 1, // slidemove will be 1 if loop is true
             slideMargin: 1,
             vertical:true,
             verticalHeight:180,
             adaptiveHeight:false,
             keyPress: true,
             controls: false,
             pager: false
            });
           }
  
          }
   }]
  );
  </code></pre>
  
  <p>templates/items/default.html</p>
  
  <p>html</p>
  
  <pre><code>    &lt;sweet-items-directive id="items"&gt;&lt;/sweet-items-directive&gt;
      &lt;div ng-if="items.length &gt; 0"&gt;
      &lt;button class="button prev"&gt;prev&lt;/button&gt;
      &lt;ul class="available-items"&gt;
          &lt;li ng-repeat="item in items" ng-click="flavor= item.flavor"&gt;
          {{ item.name }}
      &lt;/li&gt;
      &lt;/ul&gt;
      &lt;button class="button next"&gt;next&lt;/button&gt;
      &lt;/div&gt;
  </code></pre>