Jquery Flexslider in Angular - angularjs

Question

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).
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
<<div class="recent_summary clearfix">
<h2>RECENTLY VIEWED</h2>
<div class="nav_carousel">
<div class="carousel mini_thumb_slider">
<ul class="stage_nav">
<li ng-repeat="arrObj in recentItems">
<div ng-repeat="arrItem in arrObj.timestamp track by $index">
<div ng-repeat="(wsitekey,item) in arrItem.sites track by $index">
<div ng-repeat="(prokey,proMd5) in item.add_to_cart track by $index">
<div class="product-image mini">
<div class="p_image_innner">
<img ng-src="{{proMd5.image}}" title="{{proMd5.title}} by {{item.info.name}}">
<div class="rateit">
<div class="rateis">
</div>
</div>
<a class="quick-product" data-toggle="modal" data-target="#quick-popup" ng-click="set_current_product_pro(proMd5,item,prokey,wsitekey)">+</a>
</div>
</div>
<div class="caption"><a ng-click="menuShopApi('',item.info.name)">{{item.info.name}}</a></div>
</div>
<div ng-repeat="(prokey,proMd5) in item.failed_to_add_to_cart track by $index">
<div class="product-image mini">
<div class="p_image_innner">
<img ng-src="{{proMd5.image}}" title="{{proMd5.title}} by {{item.info.name}}">
<div class="rateit">
<div class="rateis">
</div>
</div>
<a class="quick-product" data-toggle="modal" data-target="#quick-popup" ng-click="set_current_product_pro(proMd5,item,prokey,wsitekey)">+</a>
</div>
</div>
<div class="caption"><a ng-click="menuShopApi('',item.info.name)">{{item.info.name}}</a></div>
</div>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
Angular flex slider attempt to solve inside partial
<div class="recent_summary clearfix">
<h2>RECENTLY VIEWED</h2>
<div class="nav_carousel">
<div class="carousel mini_thumb_slider">
<ul class="stage_nav">
<li ng-repeat="arrObj in recentItems">
<div ng-repeat="arrItem in arrObj.timestamp track by $index">
<div ng-repeat="(wsitekey,item) in arrItem.sites track by $index">
<flex-slider flex-slide="proMd5 in item.add_to_cart track by $index">
<li>
<div class="product-image mini">
<div class="p_image_innner">
<img ng-src="{{proMd5.image}}" title="{{proMd5.title}} by {{item.info.name}}">
<div class="rateit">
<div class="rateis">
</div>
</div>
<a class="quick-product" data-toggle="modal" data-target="#quick-popup" ng-click="set_current_product_pro(proMd5,item,prokey,wsitekey)">+</a>
</div>
</div>
<div class="caption"><a ng-click="menuShopApi('',item.info.name)">{{item.info.name}}</a></div>
</li>
</flex-slider>
<div ng-repeat="(prokey,proMd5) in item.failed_to_add_to_cart track by $index">
<div class="product-image mini">
<div class="p_image_innner">
<img ng-src="{{proMd5.image}}" title="{{proMd5.title}} by {{item.info.name}}">
<div class="rateit">
<div class="rateis">
</div>
</div>
<a class="quick-product" data-toggle="modal" data-target="#quick-popup" ng-click="set_current_product_pro(proMd5,item,prokey,wsitekey)">+</a>
</div>
</div>
<div class="caption"><a ng-click="menuShopApi('',item.info.name)">{{item.info.name}}</a></div>
</div>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
used scripts
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/flexslider/2.2.2/flexslider.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/flexslider/2.2.2/jquery.flexslider.js"></script>
<script src="https://rawgit.com/wilsonwc/angular-flexslider/master/angular-flexslider.js"></script>

Answer 1

Use Flexsilder without Angular and try this code:
var slider = $('#slider').data('flexslider');
slider.addSlide(obj, position);
or
$('#slider').flexslider('addSlide', obj[, position]);
Because HTML will be rendering after Flexsilder;