Q:

Get index from several carousel in angularJS

I am trying to get the index of several carousels from bootstrap. At this moment I get only the index of one carousel.
Here is the code.
<body ng-app="menuAPP" ng-controller="mainController">

    <!-- ------------------------------------------------------ -->
    <!-- SLIDER DE BASES DE BRAZOS ROBOTICOS -->

    <div id="container" class="c-wrapper" style="width: 60%; margin-left: 20%" align="center">
    <!-- Con   class="carousel" no sale error pero no funciona-->
        <div id="Carousel-roboticArmB" class="carousel slide" >
            <ol class="carousel-indicators">
                <li data-target="#Carousel-roboticArmB" data-slide-to="0" class="active"></li>
                <%
                for(int i=1;i<=bases.size();i++)
                {
                    %><li data-target="#Carousel-roboticArmB data-slide-to="<%out.println(i); %>" class></li><%
                }
                 %>
            </ol>

            <!-- Wrapper for slides -->
            <div class="carousel-inner">
            <%
                    boolean activo=true;

                    for(Pieza i: bases)
                    {
                        String url = i.getImg();
                        if(activo)
                        {
                            activo=false;
                            %>
                            <div class="item active" id="base">
                            <img src="<%out.println(url);%>" alt="IMG-NOT FOUND">
                            <div class="carousel-caption">
                                <h3><%out.println(i.getNombre());%></h3>
                                <p><%out.println(i.getDescripcion());%></p>
                            </div>
                            </div>
                            <%
                        }
                        else
                        {
                            %>
                            <div class="item" id="base">
                            <img src="<%out.println(url);%>" alt="IMG-NOT FOUND">
                            <div class="carousel-caption">
                                <h3><%out.println(i.getNombre());%></h3>
                                <p><%out.println(i.getDescripcion());%></p>
                            </div>
                            </div>
                            <%  
                        }                           
                    }                       
            %>
            </div>          

            <!-- Controls -->
              <a ng-non-bindable class="left carousel-control" href="#Carousel-roboticArmB" role="button" data-slide="prev">
                <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
                <span class="sr-only">Anterior</span>
              </a>
              <a ng-non-bindable class="right carousel-control" href="#Carousel-roboticArmB" role="button" data-slide="next">
                <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
                <span class="sr-only">Siguiente</span>
              </a>                
              <input type="hidden" id="sliderValue" name ="sliderValue" value={{}}>
        </div>
    </div>
    <hr>

    <!-- ------------------------------------------------------ -->
    <!-- SLIDER DE ANTEBRAZOS ROBOTICOS -->

    <div id="container" class="c-wrapper" style="width: 60%; margin-left: 20%" align="center">
    <!-- Con   class="carousel" no sale error pero no funciona-->
        <div id="Carousel-roboticArmA" class="carousel slide" >
            <ol class="carousel-indicators">
                <li data-target="#Carousel-roboticArmA" data-slide-to="0" class="active"></li>
                <%
                for(int i=1;i<=antebrazos.size();i++)
                {
                    %><li data-target="#Carousel-roboticArmA data-slide-to="<%out.println(i); %>" class></li><%
                }
                 %>
            </ol>

            <!-- Wrapper for slides -->
            <div class="carousel-inner">
            <%
                    activo=true;

                    for(Pieza i: antebrazos)
                    {
                        String url = i.getImg();
                        if(activo)
                        {
                            activo=false;
                            %>
                            <div class="item active" id="ante">
                            <img src="<%out.println(url);%>" alt="IMG-NOT FOUND">
                            <div class="carousel-caption">
                                <h3><%out.println(i.getNombre());%></h3>
                                <p><%out.println(i.getDescripcion());%></p>
                            </div>
                            </div>
                            <%
                        }
                        else
                        {
                            %>
                            <div class="item" id="ante">
                            <img src="<%out.println(url);%>" alt="IMG-NOT FOUND">
                            <div class="carousel-caption">
                                <h3><%out.println(i.getNombre());%></h3>
                                <p><%out.println(i.getDescripcion());%></p>
                            </div>
                            </div>
                            <%  
                        }                       
                    }

            %>
            </div>

            <!-- Controls -->
              <a ng-non-bindable class="left carousel-control" href="#Carousel-roboticArmA" role="button" data-slide="prev">
                <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
                <span class="sr-only">Anterior</span>
              </a>
              <a ng-non-bindable class="right carousel-control" href="#Carousel-roboticArmA" role="button" data-slide="next">
                <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
                <span class="sr-only">Siguiente</span>
              </a>                
              <input type="hidden" id="sliderValue" name ="sliderValue" value={{}}>
        </div>
    </div>
    <hr>
    <!-- ------------------------------------------------------ -->
    <!-- SLIDER DE MANOS ROBOTICOS -->

    <div id="container" class="c-wrapper" style="width: 60%; margin-left: 20%" align="center">
    <!-- Con   class="carousel" no sale error pero no funciona-->
        <div id="Carousel-roboticArmM" class="carousel slide" >
            <ol class="carousel-indicators">
                <li data-target="#Carousel-roboticArmM" data-slide-to="0" class="active"></li>
                <%
                for(int i=1;i<=manos.size();i++)
                {
                    %><li data-target="#Carousel-roboticArmM data-slide-to="<%out.println(i); %>" class></li><%
                }
                 %>
            </ol>

            <!-- Wrapper for slides -->
            <div class="carousel-inner">
            <%
                    activo=true;

                    for(Pieza i: manos)
                    {
                        String url = i.getImg();
                        if(activo)
                        {
                            activo=false;
                            %>
                            <div class="item active" id="mano">
                            <img src="<%out.println(url);%>" alt="IMG-NOT FOUND">
                            <div class="carousel-caption">
                                <h3><%out.println(i.getNombre());%></h3>
                                <p><%out.println(i.getDescripcion());%></p>
                            </div>
                            </div>
                            <%
                        }
                        else
                        {
                            %>
                            <div class="item" id="mano">
                            <img src="<%out.println(url);%>" alt="IMG-NOT FOUND">
                            <div class="carousel-caption">
                                <h3><%out.println(i.getNombre());%></h3>
                                <p><%out.println(i.getDescripcion());%></p>
                            </div>
                            </div>
                            <%  
                        }                           
                    }                       
            %>
            </div>          
            <hr>    

            <!-- Controls -->
              <a ng-non-bindable class="left carousel-control" href="#Carousel-roboticArmM" role="button" data-slide="prev">
                <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
                <span class="sr-only">Anterior</span>
              </a>
              <a ng-non-bindable class="right carousel-control" href="#Carousel-roboticArmM" role="button" data-slide="next">
                <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
                <span class="sr-only">Siguiente</span>
              </a>                
              <input type="hidden" id="sliderValue" name ="sliderValue" value={{}}>
        </div>
    </div>
    <!-- ------------------------------------------------------ -->
    <form id="formShowBrazo" method="post" action="redirect" >
            <input type="button" value="Probar brazo seleccionado" ng-click="show()" class="btn btn-primary"/>
    </form>
    <script>
        var app = angular.module('menuAPP', ['ui.bootstrap']);
        app.controller('mainController', function($scope, $http, $window, $location) {
            $scope.hideError=true;
            $scope.show = function() {

                $scope.currentBaseIndex = $("#brazo, div.active").index() + 1;//Saca el indice actual del carousel
                $scope.currentAnteIndex = $("#antebrazo, div.active").index() + 1;//Saca el indice actual del carousel
                $scope.currentManoIndex = $("#mano, div.active").index() + 1;//Saca el indice actual del carousel
                var params = "Data :"+$scope.currentBaseIndex+":"+$scope.currentAnteIndex+":"+$scope.currentManoIndex;
                var data = angular.toJson(params)
                $http({
                    method: 'POST',
                    url: 'showPieza',                                                             
                    data: 'Data=' + data,
                    headers : {
                        'Content-Type' : 'application/x-www-form-urlencoded'
                    }
                }).success(function(response)
                {
                    post("formShowBrazo");
                });
            };      

            function isActive(slide) {
                  return slide.active;
            };

        });     
    </script>   
</body>

Here need a string with the index of all carousel 
var params = "Data :"+$scope.currentBaseIndex+":"+$scope.currentAnteIndex+":"+$scope.currentManoIndex;

The problem is that all values are the index of the first carousel (id="Carousel-roboticArmB") 
EXAMPLE
1º carousel index: 2
2º carousel index: 4
3º carousel index: 1
Expected output: "Data :4:2:1"
Real output: "Data :2:2:2"

A:

Solved
$scope.currentBaseIndex = $("div.active#base").index() + 1;
$scope.currentAnteIndex = $("div.active#ante").index() + 
$scope.currentManoIndex = $("div.active#mano").index() + 1;

The solution was change the position of ID and class.
Hope someone will find this helpful.

