événement click non détecté

Bonjour à tous,

Je souhaite réaliser un "slider" dans un slider



J'aimerai ajouter une class au pictogramme du slider en cours de visualisation pour que l'on sache où on se situe mais la fonction click ne se déclenche pas lorsque je clique sur l'un des li
(si je le place sur le ul en revanche cela fonctionne)

Merci pour votre aide

    <!-- contents -->
    <section class="news apropos clear" id="news-from-category">
        <!-- contents slider with thumbnails -->
        <div class="content-offre" ng-show="isSlider">
            <div class="slider-apropos">
                <!-- thumbnails -->
                <ul class="slider-controls" ng-class="{true: 'chiffres', false: ''}[category=='chiffres']">
                    <li class="item-apropos" ng-repeat="slideritem in items" ng-click="change($index)" scroll-to data-scroll-to-target-id="news-from-category">
                        <i class="fa fa-apropos"><img class="paddingTop-lg" border="0" src="Handlers/GetImage.ashx?id={{slideritem.largePicture}}" /></i>
                        <h5>{{slideritem.title}}</h5>
                    </li>
                </ul>
                <!-- selected content -->
                <div class="content-slider">
                    <div ng-bind-html="activeItem.content"></div>
                </div>
            </div>
        </div>

        <!-- agences -->
        <div class="content-agences" ng-show="category=='agences'">
            <p class="infos-agences" ng-bind-html="activeItem.content"></p>
            <div class="map-agences">
                <img src="Handlers/GetImage.ashx?id={{activeItem.largePicture}}">
            </div>
        </div>
    </section>

<script>
    $(document).ready(function () {
        $('.item-apropos').click(function () {
            alert("JQuery Running!");
            $('.item-apropos').removeClass('active-cat');
            $(this).addClass('active-cat');
    });

});
</script>