библиотека jquery.sliderPro.min.js и angular

Не получается адекватно спарить слайдер и angular. Когда я средствами asp при помощи Response.Write("строки html"); генерировал слайдер в asp странице - всё отображалось адекватно, слайдер работал.

 <div class="sp-slides">
  <%
   for (int x = 0; x < product._listProductsEqualArticul[indexTop]._listNavigUrl.Count; x++)
      {
        Response.Write("<div class=\"sp-slide\">");
        Response.Write("<img class=\"sp-image\" src=\"/Content/src/css/images/blank.gif\"");
        Response.Write("data-src=\"" + dirImg + product._listProductsEqualArticul[indexTop]._idProduct + "Big/" + product._listProductsEqualArticul[indexTop]._listNavigUrl[x]._navigUrl + "\"");
        Response.Write("data-small=\"" + dirImg + product._listProductsEqualArticul[indexTop]._idProduct + "Big/" + product._listProductsEqualArticul[indexTop]._listNavigUrl[x]._navigUrl + "\"");
        Response.Write("data-medium=\"" + dirImg + product._listProductsEqualArticul[indexTop]._idProduct + "Big/" + product._listProductsEqualArticul[indexTop]._listNavigUrl[x]._navigUrl + "\"");
        Response.Write("data-large=\"" + dirImg + product._listProductsEqualArticul[indexTop]._idProduct + "Big/" + product._listProductsEqualArticul[indexTop]._listNavigUrl[x]._navigUrl + "\"");
        Response.Write("data-retina=\"" + dirImg + product._listProductsEqualArticul[indexTop]._idProduct + "Big/" + product._listProductsEqualArticul[indexTop]._listNavigUrl[x]._navigUrl + "\" />");
        Response.Write("</div>");
     }
   %>
 </div>
 <div class="sp-thumbnails">
 <%
   for (int x = 0; x < product._listProductsEqualArticul[indexTop]._listNavigUrl.Count; x++)
     Response.Write("<img class=\"sp-thumbnail\" src=\"" + dirImg + product._listProductsEqualArticul[indexTop]._idProduct + "Medium/" + product._listProductsEqualArticul[indexTop]._listNavigUrl[x]._navigUrl + "\" />");
   for (int x = 0; x < product._listProductsEqualArticul.Count; x++)
    {
      Response.Write("<img class=\"sp-thumbnail\" src=\"" + dirImg + product._listProductsEqualArticul[x]._idProduct + "Medium/" + product._listProductsEqualArticul[x]._navigUrl + "\" />");
    }
   %>
</div>

Когда переделал на angular слайдер стал генерироваться криво (когда инспектировал страницу, верстка перевернута) ну и плюс он не работает в результате.

<div class="slider-card">
 <div id="slider-card" class="slider-pro">
  <div class="sp-slides">
   <div class="sp-slide" ng-repeat="p in products">
    <img class="sp-image" src="/Content/src/css/images/blank.gif"
         data-src="{{p._dirImg}}{{p._idProduct}}Big/{{p._navigUrl}}"
         data-small="{{p._dirImg}}{{p._idProduct}}Big/{{p._navigUrl}}"
         data-medium="{{p._dirImg}}{{p._idProduct}}Big/{{p._navigUrl}}"
         data-large="{{p._dirImg}}{{p._idProduct}}Big/{{p._navigUrl}}"
         data-retina="{{p._dirImg}}{{p._idProduct}}Big/{{p._navigUrl}}" />
   </div>
  </div>
<div class="sp-thumbnails">
 <img class="sp-thumbnail" src="{{p._dirImg}}    {{p._idProduct}}Big/{{p._navigUrl}}" ng-repeat="p in products" />
</div>

в итоге в yandex браузере вижу вот такую картину:

<div class="slider-card">
  <div id="slider-card" class="slider-pro sp-horizontal" style="width: 100%; max-width: 650px;">
 <div class="sp-thumbnails">
    <!-- ngRepeat: p in products -->
   <img class="sp-thumbnail ng-scope" src="http://onlinestore.1gb.ru/ImageProducts/120Big/IMG_8599.jpg" ng-repeat="p in products">
    <!-- end ngRepeat: p in products -->
    <img class="sp-thumbnail ng-scope" src="http://onlinestore.1gb.ru/ImageProducts/121Big/IMG_8602.jpg" ng-repeat="p in products">
    <!-- end ngRepeat: p in products -->
    <img class="sp-thumbnail ng-scope" src="http://onlinestore.1gb.ru/ImageProducts/122Big/IMG_8603.jpg" ng-repeat="p in products">
    <!-- end ngRepeat: p in products -->
    <img class="sp-thumbnail ng-scope" src="http://onlinestore.1gb.ru/ImageProducts/123Big/IMG_8604.jpg" ng-repeat="p in products">
    <!-- end ngRepeat: p in products -->
   </div>
   <div class="sp-slides-container">
     <div class="sp-mask sp-grab" style="width: 540px; height: 540px;">
       <div class="sp-slides">
        <!-- ngRepeat: p in products -->
          <div class="sp-slide ng-scope" ng-repeat="p in products">
            <img class="sp-image" src="/Content/src/css/images/blank.gif" data-src="{{p._dirImg}}{{p._idProduct}}Big/{{p._navigUrl}}" data-small="http://onlinestore.1gb.ru/ImageProducts/120Big/IMG_8599.jpg" data-medium="http://onlinestore.1gb.ru/ImageProducts/120Big/IMG_8599.jpg" data-large="http://onlinestore.1gb.ru/ImageProducts/120Big/IMG_8599.jpg" data-retina="http://onlinestore.1gb.ru/ImageProducts/120Big/IMG_8599.jpg">
          </div>
        <!-- end ngRepeat: p in products -->
          <div class="sp-slide ng-scope" ng-repeat="p in products">
            <img class="sp-image" src="/Content/src/css/images/blank.gif" data-src="{{p._dirImg}}{{p._idProduct}}Big/{{p._navigUrl}}" data-small="http://onlinestore.1gb.ru/ImageProducts/121Big/IMG_8602.jpg" data-medium="http://onlinestore.1gb.ru/ImageProducts/121Big/IMG_8602.jpg" data-large="http://onlinestore.1gb.ru/ImageProducts/121Big/IMG_8602.jpg" data-retina="http://onlinestore.1gb.ru/ImageProducts/121Big/IMG_8602.jpg">
           </div>
         <!-- end ngRepeat: p in products -->
           <div class="sp-slide ng-scope" ng-repeat="p in products">
             <img class="sp-image" src="/Content/src/css/images/blank.gif" data-src="{{p._dirImg}}{{p._idProduct}}Big/{{p._navigUrl}}" data-small="http://onlinestore.1gb.ru/ImageProducts/122Big/IMG_8603.jpg" data-medium="http://onlinestore.1gb.ru/ImageProducts/122Big/IMG_8603.jpg" data-large="http://onlinestore.1gb.ru/ImageProducts/122Big/IMG_8603.jpg" data-retina="http://onlinestore.1gb.ru/ImageProducts/122Big/IMG_8603.jpg">
            </div>
              <!-- end ngRepeat: p in products -->
            <div class="sp-slide ng-scope" ng-repeat="p in products">
               <img class="sp-image" src="/Content/src/css/images/blank.gif" data-src="{{p._dirImg}}{{p._idProduct}}Big/{{p._navigUrl}}" data-small="http://onlinestore.1gb.ru/ImageProducts/123Big/IMG_8604.jpg" data-medium="http://onlinestore.1gb.ru/ImageProducts/123Big/IMG_8604.jpg" data-large="http://onlinestore.1gb.ru/ImageProducts/123Big/IMG_8604.jpg" data-retina="http://onlinestore.1gb.ru/ImageProducts/123Big/IMG_8604.jpg">
            </div>
              <!-- end ngRepeat: p in products -->
            </div>
          </div>
        </div>
      </div>
    </div>

во-первых блоки и поменялись местами.

во-вторых data-src="{{p._dirImg}}{{p._idProduct}}Big/{{p._navigUrl}}" в следующем блоке так выглядит, а остальные ссылки нормально.

<div class="sp-slide ng-scope" ng-repeat="p in products">
 <img class="sp-image" src="/Content/src/css/images/blank.gif" 
   data-src="{{p._dirImg}}{{p._idProduct}}Big/{{p._navigUrl}}" 
   data-small="http://onlinestore.1gb.ru/ImageProducts/123Big/IMG_8604.jpg"
   data-medium="http://onlinestore.1gb.ru/ImageProducts/123Big/IMG_8604.jpg" 
   data-large="http://onlinestore.1gb.ru/ImageProducts/123Big/IMG_8604.jpg"
   data-retina="http://onlinestore.1gb.ru/ImageProducts/123Big/IMG_8604.jpg">

как быть? как совладать с ситуацией?