How to use jQuery inside an AngularJS controller?

Question

I usually put jQuery code inside a function and then call it from the controller.

The example below is a slideshow, it's been called from the controller but nothing happens. I put in a few console.log which show up except for one function (changePanel function).

Here is the jsfiddle with the code:

https://jsfiddle.net/codeforme2016/rb1cp2L4/

Here the code:

app.directive('shopProject', function () {
 return {
    restrict: 'E',
    templateUrl: 'projects/shop/shop.html',
    scope: {},
    controller: 'shopCtrl',
    link: function(scope){}
 } 
})

app.controller('shopCtrl', function($scope) {

 function slider() {
    console.log("haaaaaa")
    $(function() {
        console.log("haaaaaa2222")

        var SliderModule = (function() {
            console.log("haaaaaa333")
            var pb = {};
            pb.el = $('#slider');
            pb.items = {
                panels: pb.el.find('.slider-wrapper > li'),
            }

            var SliderInterval,
                currentSlider = 0,
                nextSlider = 1,
                lengthSlider = pb.items.panels.length;


            pb.init = function(settings) {
                console.log("haaaaa4444a")
                this.settings = settings || {
                    duration: 8000
                };
                var items = this.items,
                    lengthPanels = items.panels.length,
                    output = '';


                for (var i = 0; i < lengthPanels; i++) {
                    if (i == 0) {
                        output += '<li class="active"></li>';
                    } else {
                        output += '<li></li>';
                    }
                }

                $('#control-buttons').html(output);

                activateSlider();
                // Eventos para los controles
                $('#control-buttons').on('click', 'li', function(e) {
                    var $this = $(this);
                    if (!(currentSlider === $this.index())) {
                        changePanel($this.index());
                    }
                });

            }


            var activateSlider = function() {
                console.log("haaaaaa5555")
                SliderInterval = setInterval(pb.startSlider, pb.settings.duration);
            }

            pb.startSlider = function() {

                var items = pb.items,
                    controls = $('#control-buttons li');
                // Comprobamos si es el ultimo panel para reiniciar el conteo
                if (nextSlider >= lengthSlider) {
                    nextSlider = 0;
                    currentSlider = lengthSlider - 1;
                }

                  controls.removeClass('active').eq(nextSlider).addClass('active');
                items.panels.eq(currentSlider).fadeOut('slow');
                items.panels.eq(nextSlider).fadeIn('slow');


                currentSlider = nextSlider;
                nextSlider += 1;
            }


            var changePanel = function(id) {
                console.log("haaaaaaughg99999")
                clearInterval(SliderInterval);
                var items = pb.items,
                    controls = $('#control-buttons li');
                // Comprobamos si el ID esta disponible entre los paneles
                if (id >= lengthSlider) {
                    id = 0;
                } else if (id < 0) {
                    id = lengthSlider - 1;
                }

                controls.removeClass('active').eq(id).addClass('active');
                items.panels.eq(currentSlider).fadeOut('slow');
                items.panels.eq(id).fadeIn('slow');


                currentSlider = id;
                nextSlider = id + 1;

                activateSlider();
            }

            return pb;
        }());

        SliderModule.init({
            duration: 4000
        });

    });
 }
 slider();

})

HTML:

<section id="slider" class="container">
  <ul class="slider-wrapper">
    <li class="current-slide">
        <img  src="http://i9.photobucket.com/albums/a88/creaticode/1_zpsc6871490.jpg" title="" alt="">

        <div class="caption">
            <h2 class="slider-title">Diseño web</h2>
            <p>Lorem ipsum</p>
        </div>
    </li>

    <li>
        <img src="http://i9.photobucket.com/albums/a88/creaticode/2_zps6ccd36bd.jpg" title="" alt="">

        <div class="caption">
            <h2 class="slider-title">Diseño Responsive</h2>
            <p>Lorem ipsum </p>
        </div>
    </li>

    <li>
        <img src="http://i9.photobucket.com/albums/a88/creaticode/4_zps611bc9f9.jpg" title="" alt="">

        <div class="caption">
            <h2 class="slider-title">Identidad Corporativa</h2>
            <p>Lorem ipsum </p>
        </div>
    </li>

    <li>
        <img src="http://i9.photobucket.com/albums/a88/creaticode/3_zps70e4fcc5.jpg" title="" alt="">

        <div class="caption">
            <h2 class="slider-title">Desarrollo Web</h2>
            <p>Lorem ipsum</p>
        </div>
    </li>
 </ul>

   <div class="slider-shadow"></div>

  <ul id="control-buttons" class="control-buttons"></ul>
</section>

EDIT: the problem seems to be in how I reference my files and the like because its working if all the files are in the same directory-

js/index.html

<script src="projects/shop/shop.directive.js"></script>

js/home/home.html js/home/home.js

hier I have also included jQuery in controllers + called it from insight which WORKS

js/projects/shop/shop.html js/projects/shop/shop.directive.js

hier i have the shop directive and controller and do the same as in the html.js -call jQuery from insight the controller but here NOTHING works.

I def. correctly included all script tags in index.html because otherwise I wouldn't be able to see the content from the templates.