Angular 1.5 + jquery scroll animation

I have small angular SPA with couple routes. What I wanted is to have fadein effect only on #/welcome/ page. My jquery works ok but the problem is - its running on all pages and in another pages elements what should be animated just doesnt exist and thats the reason I have errors on my console when user scroll... I tried run script only when route changed and than check if location is /#/welcome but it always running even if not... I tried to put code only to controller which should scoped it to section with animating elements but it also run in another pages... Im confused please help

      $scope.$on('$routeChangeSuccess', function() {
            if (window.location.hash == '#/welcome') {
                function check(element , fadeEffect ) {
                    $(window).on('scroll' , function(){
                        var position = $(document).scrollTop() + $(window).innerHeight()  ;
                        var elem = $(element).offset().top + ($(element).innerHeight()) / 2;
                        if (elem <= position) {
                            $(element).addClass(fadeEffect);
                        }
                        else {
                            $(element).removeClass(fadeEffect);
                        }
                    });
                }
                check('.tablet' , 'fadeInRight');
                check('.padding' , 'fadeInLeft');
            }
            else {
                console.log('another page');
            }
        });