.js file loading but not executing [closed]

Question

ok so here's my problem. I got an image slider from a tutorial on youtube, I had to change it around a bit since I'm working with angular and getting the images from an array. Everything loads if I check the sources in google chrome, my slider.js file is there, my css, etc... but the slider won't work, well it doesn't get activated is a better way to put it: if I insert the code from slider.js into the chrome console: hit enter -> BOOOM works perfectly, I've been looking for what the problem might be, tried adding the type="text/javascript" in the script tags, added the (document).ready in my jquery, still nothing... I'll add some of my code and hopefully anyone here can spot the problem!

The slider.js File

'use strict';

$(document).ready(function() {

//settings for slider
var width = 320;
var animationSpeed = 1000;
var pause = 3000;
var currentSlide = 1;

//cache DOM elements
var $slider = $('.project-slider');
var $slideContainer = $('.slides', $slider);
var $slides = $('.slide', $slider);

var interval;

function startSlider() {
    interval = setInterval(function() {
        $slideContainer.animate({'margin-left': '-='+width}, animationSpeed, function() {

            if (++currentSlide === $slides.length) {
                currentSlide = 1;
                $slideContainer.css('margin-left', 0);
            }
        });
    }, pause);
}
function pauseSlider() {
    clearInterval(interval);
}

$slideContainer
    .on('mouseenter', pauseSlider)
    .on('mouseleave', startSlider);

startSlider();


});

Answer 1

app.directive("projectGallery", function(){
    return {
                restrict: 'E',
                templateUrl: "directives/project-gallery.html",
                controller: function(){
                                        this.current = 0;
                                        this.setCurrent = function(val){
                                            this.current = 0;
                                            if(val)
                                                this.current = val;
                                            };
                                        'use strict';

                                        $(document).ready(function() {

                                            //settings for slider
                                            var width = 320;
                                            var animationSpeed = 1000;
                                            var pause = 3000;
                                            var currentSlide = 1;

                                            //cache DOM elements
                                            var $slider = $('.project-slider');
                                            var $slideContainer = $('.slides', $slider);
                                            var $slides = $('.slide', $slider);

                                            var interval;

                                            function startSlider() {
                                                interval = setInterval(function() {
                                                    $slideContainer.animate({'margin-left': '-='+width}, animationSpeed, function() {

                                                        if (++currentSlide === $slides.length) {
                                                            currentSlide = 1;
                                                            $slideContainer.css('margin-left', 0);
                                                        }
                                                    });
                                                }, pause);
                                            }
                                            function pauseSlider() {
                                                clearInterval(interval);
                                            }

                                            $slideContainer
                                                .on('mouseenter', pauseSlider)
                                                .on('mouseleave', startSlider);

                                            startSlider();


                                        });
                                       },
                controllerAs: 'gallery',
           };
});