angular js flexslider with one row of thumbnails - angularjs

Question

I am using the flexslider with angularjs, so the examples form the website with jquery are not really helpful. So I have implemented the slider:
HTML
<div>
<flex-slider flex-slide="image in product.imagePaths track by $index" animation="slide" control-nav="thumbnails">
<li data-thumb="{{imagesUrl}}{{image.thumbnail}}">
<img ng-src="{{imagesUrl}}{{image.custom}}">
</li>
</flex-slider>
</div>
in the js I get an array of objects that consist of three strings each(paths for original, custom size and thumb)
and have overwritten CSS for size:
.flexslider {
width: 400px;
height: 400px;
}
.flexslider .slides img {
width: 400px;
height: 400px;
}
.flex-direction-nav a {
line-height: 40px;
}
I have 12 thumbnails, clicking them works fine, does exactly what they are supposed to do; the problem is that they are all visible, shown on three rows. I have added the requested classes:
<link rel="stylesheet" href="/Content/flexslider/flexslider.css" />
and scripts:
<script src="/Scripts/jquery-2.1.3.js"></script>
<script src="/Scripts/jquery.flexslider.js"></script>
<script src="/Scripts/jquery-ui-1.11.4.js"></script>
<script src="/Scripts/modernizr-2.8.3.js"></script>
<script src="/Scripts/angular.js"></script>
<script src="/Scripts/angular-flexslider.js"></script>
don't know what else to do, and I find documentation (examples) for angular very poor. Can anyone please help? spent already a day on it...
EDIT
plunker for demo: http://plnkr.co/edit/gWtik8Q3qXhQjlyjhoRD
SECOND EDIT
ok, I have found a plunker with a working carousel for thumbnails, but it basically builds two flex sliders. is this the only way? when in the example on git (https://github.com/thenikso/angular-flexslider/blob/master/examples/thumbnail-controlnav.html) they use my version? plunker: http://plnkr.co/edit/K4VBoSqCAFbr1Fps0JJr

Answer 1

See the Plunker I created. This is a modification of your Plunker attached. Per the implementation, jQuery or not, you need to split the images and the thumbnail. http://plnkr.co/edit/kTSQuJfi5OmOSw6cU06x?p=preview
<div id="container" ng-controller="MainCtrl">
<div class="col-sm-12">
<flex-slider slider-id="slider" flex-slide="image in prod.imagePaths track by $index" animation="fade" animation-loop="false" sync="#carousel" slideshow="false" control-nav="false" init-delay="100">
<li>
<img ng-src="{{image.custom}}">
</li>
</flex-slider>
</div>
<div class="col-sm-12">
<flex-slider slider-id="carousel" flex-slide="image in prod.imagePaths track by $index" animation="slide" animation-loop="false" item-width="210" item-margin="5" as-nav-for="#slider" slideshow="false" control-nav="false">
<li>
<img ng-src="{{image.thumbnail}}">
</li>
</flex-slider>
</div>
</div>