title: angular js flexslider with one row of thumbnails
body: <p>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</p>
  
  <pre><code>&lt;div&gt;
       &lt;flex-slider flex-slide="image in product.imagePaths track by $index" animation="slide" control-nav="thumbnails"&gt;
          &lt;li data-thumb="{{imagesUrl}}{{image.thumbnail}}"&gt;
              &lt;img ng-src="{{imagesUrl}}{{image.custom}}"&gt;
          &lt;/li&gt;
       &lt;/flex-slider&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>in the js I get an array of objects that consist of three strings each(paths for original, custom size and thumb)</p>
  
  <p>and have overwritten CSS for size:</p>
  
  <pre><code>  .flexslider {
            width: 400px;
            height: 400px;
     }
  
          .flexslider .slides img {
              width: 400px;
              height: 400px;
          }
  
    .flex-direction-nav a  {
        line-height: 40px;
      }
  </code></pre>
  
  <p>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:</p>
  
  <pre><code>&lt;link rel="stylesheet" href="/Content/flexslider/flexslider.css" /&gt;
  </code></pre>
  
  <p>and scripts:</p>
  
  <pre><code>&lt;script src="/Scripts/jquery-2.1.3.js"&gt;&lt;/script&gt;
  &lt;script src="/Scripts/jquery.flexslider.js"&gt;&lt;/script&gt;
  &lt;script src="/Scripts/jquery-ui-1.11.4.js"&gt;&lt;/script&gt;
  &lt;script src="/Scripts/modernizr-2.8.3.js"&gt;&lt;/script&gt;
  &lt;script src="/Scripts/angular.js"&gt;&lt;/script&gt;
  &lt;script src="/Scripts/angular-flexslider.js"&gt;&lt;/script&gt;
  </code></pre>
  
  <p>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...</p>
  
  <p><strong>EDIT</strong>
  plunker for demo: <a href="http://plnkr.co/edit/gWtik8Q3qXhQjlyjhoRD" rel="nofollow">http://plnkr.co/edit/gWtik8Q3qXhQjlyjhoRD</a></p>
  
  <p><strong>SECOND EDIT</strong>
  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 (<a href="https://github.com/thenikso/angular-flexslider/blob/master/examples/thumbnail-controlnav.html" rel="nofollow">https://github.com/thenikso/angular-flexslider/blob/master/examples/thumbnail-controlnav.html</a>) they use my version? plunker: <a href="http://plnkr.co/edit/K4VBoSqCAFbr1Fps0JJr" rel="nofollow">http://plnkr.co/edit/K4VBoSqCAFbr1Fps0JJr</a></p>