title: Jquery Flexslider in Angular
body: <p>Our designer has given me jquery flexslider for showing recently viewed items in our project. I need to construct a slider of recently viewed products in angular js, dynamically based on provided flex slider.In my system, recently viewed items are stored as json object( not array).</p>
  
  <p>First of all flexslider is not working, it means sliding feature is not working inside my angular project. I tried to use angular flex slider module from online and tried to iterate my nested object and construct a slider using my data. It is also not working(picture is not showing). My designer asked me to write down a directive, so overall design will not have any problem or any design modification. 
    Can any of you can help me regarding this 
    Jquery flex slider dynamic part inside partial as follows   </p>
  
  <pre><code> &lt;&lt;div class="recent_summary clearfix"&gt;
                  &lt;h2&gt;RECENTLY VIEWED&lt;/h2&gt;
  
  
  
                  &lt;div class="nav_carousel"&gt;
                      &lt;div class="carousel mini_thumb_slider"&gt;
  
                          &lt;ul class="stage_nav"&gt;
  
                            &lt;li ng-repeat="arrObj in recentItems"&gt;
                              &lt;div ng-repeat="arrItem in arrObj.timestamp track by $index"&gt;
                                  &lt;div ng-repeat="(wsitekey,item) in arrItem.sites track by $index"&gt;
  
  
  
  
                                      &lt;div ng-repeat="(prokey,proMd5) in item.add_to_cart track by $index"&gt;
                                          &lt;div class="product-image mini"&gt;
                                              &lt;div class="p_image_innner"&gt;
                                                  &lt;img ng-src="{{proMd5.image}}" title="{{proMd5.title}}  by {{item.info.name}}"&gt;
                                                  &lt;div class="rateit"&gt;
                                                      &lt;div class="rateis"&gt;
                                                      &lt;/div&gt;
                                                  &lt;/div&gt;
                                                  &lt;a class="quick-product" data-toggle="modal" data-target="#quick-popup" ng-click="set_current_product_pro(proMd5,item,prokey,wsitekey)"&gt;+&lt;/a&gt;
                                              &lt;/div&gt;
                                          &lt;/div&gt;
                                          &lt;div class="caption"&gt;&lt;a ng-click="menuShopApi('',item.info.name)"&gt;{{item.info.name}}&lt;/a&gt;&lt;/div&gt;
                                      &lt;/div&gt;
                                      &lt;div ng-repeat="(prokey,proMd5) in item.failed_to_add_to_cart track by $index"&gt;
                                          &lt;div class="product-image mini"&gt;
  
                                              &lt;div class="p_image_innner"&gt;
  
                                                  &lt;img ng-src="{{proMd5.image}}" title="{{proMd5.title}}  by {{item.info.name}}"&gt;
                                                  &lt;div class="rateit"&gt;
                                                      &lt;div class="rateis"&gt;
                                                      &lt;/div&gt;
                                                  &lt;/div&gt;
                                                  &lt;a class="quick-product" data-toggle="modal" data-target="#quick-popup" ng-click="set_current_product_pro(proMd5,item,prokey,wsitekey)"&gt;+&lt;/a&gt;
                                              &lt;/div&gt;
                                          &lt;/div&gt;
                                          &lt;div class="caption"&gt;&lt;a ng-click="menuShopApi('',item.info.name)"&gt;{{item.info.name}}&lt;/a&gt;&lt;/div&gt; 
                                      &lt;/div&gt;
  
                                 &lt;/div&gt; 
  
                              &lt;/div&gt;
                            &lt;/li&gt;
  
                          &lt;/ul&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
  </code></pre>
  
  <p>Angular flex slider attempt to solve inside partial</p>
  
  <pre><code> &lt;div class="recent_summary clearfix"&gt;
                  &lt;h2&gt;RECENTLY VIEWED&lt;/h2&gt;
  
  
  
  
  
  
                  &lt;div class="nav_carousel"&gt;
                      &lt;div class="carousel mini_thumb_slider"&gt;
  
                          &lt;ul class="stage_nav"&gt;
  
                            &lt;li ng-repeat="arrObj in recentItems"&gt;
                              &lt;div ng-repeat="arrItem in arrObj.timestamp track by $index"&gt;
                                  &lt;div ng-repeat="(wsitekey,item) in arrItem.sites track by $index"&gt;
  
  
  
  
  
  
                                       &lt;flex-slider flex-slide="proMd5 in item.add_to_cart track by $index"&gt;
                                        &lt;li&gt;
                                        &lt;div class="product-image mini"&gt;
                                              &lt;div class="p_image_innner"&gt;
                                                  &lt;img ng-src="{{proMd5.image}}" title="{{proMd5.title}}  by {{item.info.name}}"&gt;
                                                  &lt;div class="rateit"&gt;
                                                      &lt;div class="rateis"&gt;
                                                      &lt;/div&gt;
                                                  &lt;/div&gt;
                                                  &lt;a class="quick-product" data-toggle="modal" data-target="#quick-popup" ng-click="set_current_product_pro(proMd5,item,prokey,wsitekey)"&gt;+&lt;/a&gt;
                                              &lt;/div&gt;
                                          &lt;/div&gt;
                                          &lt;div class="caption"&gt;&lt;a ng-click="menuShopApi('',item.info.name)"&gt;{{item.info.name}}&lt;/a&gt;&lt;/div&gt;
                                         &lt;/li&gt; 
                                    &lt;/flex-slider&gt;
  
  
                                      &lt;div ng-repeat="(prokey,proMd5) in item.failed_to_add_to_cart track by $index"&gt;
                                          &lt;div class="product-image mini"&gt;
  
                                              &lt;div class="p_image_innner"&gt;
  
                                                  &lt;img ng-src="{{proMd5.image}}" title="{{proMd5.title}}  by {{item.info.name}}"&gt;
                                                  &lt;div class="rateit"&gt;
                                                      &lt;div class="rateis"&gt;
                                                      &lt;/div&gt;
                                                  &lt;/div&gt;
                                                  &lt;a class="quick-product" data-toggle="modal" data-target="#quick-popup" ng-click="set_current_product_pro(proMd5,item,prokey,wsitekey)"&gt;+&lt;/a&gt;
                                              &lt;/div&gt;
                                          &lt;/div&gt;
                                          &lt;div class="caption"&gt;&lt;a ng-click="menuShopApi('',item.info.name)"&gt;{{item.info.name}}&lt;/a&gt;&lt;/div&gt; 
                                      &lt;/div&gt;
  
                                 &lt;/div&gt; 
  
                              &lt;/div&gt;
                            &lt;/li&gt;
  
                          &lt;/ul&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
  </code></pre>
  
  <p>used scripts</p>
  
  <pre><code>&lt;link rel="stylesheet" type="text/css"  href="https://cdnjs.cloudflare.com/ajax/libs/flexslider/2.2.2/flexslider.css"&gt;
  
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/flexslider/2.2.2/jquery.flexslider.js"&gt;&lt;/script&gt;
  
  &lt;script src="https://rawgit.com/wilsonwc/angular-flexslider/master/angular-flexslider.js"&gt;&lt;/script&gt;
  </code></pre>