jQuery addclass doesn't work in twitter bootstrap carousel which using ng-repeat

问题

The issue I am facing now is jQuery addClass doesn't work under ng-repeat.

The code below is from my partial page. I am trying to highlight the image when the user select it, unfortunately it doesn't get selected since I placed under ng-repeat div (first span3 div). On the other hand I can select the image with second span3 div - dynamic without ng-repeat (loading only one image only). Both uses the same jQuery script (posted below as well).

Is there any alternative method to execute the task

Any assistance will be greatly appreciated :) Thanks alot

Partial page code:

        <div class="item active">
            <!-- Three columns of text below the carousel -->
            <div class="container">
                <div class="row" >
                    <div class="span12">
                            <div class="span3" ng-repeat="path in paths.paths | limitTo:3">
                                <div>   
                                    <label >
                                        <input  type="radio" ng-click="update_path_progress(path.id)" name="optionsRadios" ng-model="$parent.pathid" id="{{path.id}}" value="{{path.id}}" >
                                        <input class="well"type="image" ng-src="img/language/{{path.description.split(' ').join('_')}}.png" alt="" id="pathImg"/>
                                        <h6>{{path.name}}</h6>
                                    </label>
                                </div>
                            </div>
                            <div class="span3">
                                <label >
                                    <input  type="radio" ng-click="update_path_progress(path.id)" name="optionsRadios" ng-model="$parent.pathid" id="{{path.id}}" value="{{path.id}}" >
                                    <input class="well"type="image" ng-src="img/language/{{path.description.split(' ').join('_')}}.png" alt="" id="pathImg"/>
                                    <h6>{{path.name}}</h6>
                                </label>
                            </div>
                    </div>
                </div>
            </div>  
        </div>
    </div> 
    <a class="left carousel-control" data-target="#myCarousel" data-slide="prev">&lsaquo;</a>
    <a class="right carousel-control" data-target="#myCarousel" data-slide="next">&rsaquo;</a>
</div>

index.html (jQuery Script)

<script type='text/javascript'>
$(window).load(function(){
$('#myCarousel input:radio').addClass('input_hidden');
$('#myCarousel input:image').click(function() {
    $('#myCarousel input:image').removeClass('selected');   
$(this).addClass('selected');

});

});

Hi all,

I took @rGil advice and my above error was amended. However I am facing a minor bug now. I post my code below.

$scope.addColor=function(){
    $('#myCarousel input:radio').addClass('input_hidden');
    $('#myCarousel input:image').click(function() {
      $('#myCarousel input:image').removeClass('selected');   
      $(this).addClass('selected');

    });
  }

Above JS code, works fine from second selection of the image onward. But failed to work on first click. I was unsure what exactly preventing it! I greatly appreciate everyone contribution. As long as it kept my hope and fire to go-forth in my learning journey.

Once again Thanks in advance.

来源：https://stackoverflow.com/questions/16854463/jquery-addclass-doesnt-work-in-twitter-bootstrap-carousel-which-using-ng-repeat