Q:

Angular breaks jQuery slideshow

I'm working on this template and after including angular in application a lot  of functionality is broken. A somehow managed to fix them a lot, but I can not get this slide show to work properly.
This is my HTML
<!doctype html>
<!--[if IE 9 ]><html class="ie9" lang="en"><![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--><html lang="en"><!--<![endif]-->
<head>
    <link rel="icon" type="image/ico" href="images/fav.ico">
    <!--stylesheet include-->
    <link rel="stylesheet" type="text/css" media="all" href="css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" media="all" href="css/camera.css">
    <link rel="stylesheet" type="text/css" media="all" href="css/owl.carousel.css">
    <link rel="stylesheet" type="text/css" media="all" href="css/owl.transitions.css">
    <link rel="stylesheet" type="text/css" media="all" href="css/jquery.custom-scrollbar.css">
    <link rel="stylesheet" type="text/css" media="all" href="css/style.css">
    <link rel="stylesheet" type="text/css" media="all" href="css/lightbox.css">
    <!--font include-->
    <link href="css/font-awesome.min.css" rel="stylesheet">
</head>
<body ng-app="app">
<!--slider-->
<div class="camera_wrap m_bottom_0" ng-controller="slideShowCtrl" ng-show="slideShow()">
    <div data-src="images/slide_02.jpg" data-custom-thumb="images/slide_02.jpg">
        <div class="camera_caption_1 fadeFromTop t_align_c d_xs_none">
            <div class="f_size_large color_light tt_uppercase slider_title_3 m_bottom_5">Meet New Theme</div>
            <hr class="slider_divider d_inline_b m_bottom_5">
            <div class="color_light slider_title tt_uppercase t_align_c m_bottom_45 m_sm_bottom_20"><b>Attractive &amp; Elegant<br>HTML Theme</b></div>
            <div class="color_light slider_title_2 m_bottom_45">$<b>15.00</b></div>
            <a href="#" role="button" class="tr_all_hover button_type_4 bg_scheme_color color_light r_corners tt_uppercase">Buy Now</a>
        </div>
    </div>
    <div data-src="images/slide_01.jpg" data-custom-thumb="images/slide_01.jpg">
        <div class="camera_caption_2 fadeIn t_align_c d_xs_none">
            <div class="f_size_large tt_uppercase slider_title_3 scheme_color">New arrivals</div>
            <hr class="slider_divider type_2 m_bottom_5 d_inline_b">
            <div class="color_light slider_title tt_uppercase t_align_c m_bottom_65 m_sm_bottom_20"><b><span class="scheme_color">Spring/Summer 2014</span><br><span class="color_dark">Ready-To-Wear</span></b></div>
            <a href="#" role="button" class="d_sm_inline_b button_type_4 bg_scheme_color color_light r_corners tt_uppercase tr_all_hover">View Collection</a>
        </div>
    </div>
    <div data-src="images/slide_03.jpg" data-custom-thumb="images/slide_03.jpg">
        <div class="camera_caption_3 fadeFromTop t_align_c d_xs_none">
            <img src="images/slider_layer_img.png" alt="" class="m_bottom_5">
            <div class="color_light slider_title tt_uppercase t_align_c m_bottom_60 m_sm_bottom_20"><b class="color_dark">up to 70% off</b></div>
            <a href="#" role="button" class="d_sm_inline_b button_type_4 bg_scheme_color color_light r_corners tt_uppercase tr_all_hover">Shop Now</a>
        </div>
    </div>
</div>

<div ng-view></div>

<!--scripts include-->
<script src="js/jquery-2.1.4.js"></script>
<script src="js/jquery-ui.js"></script>
<script src="js/jquery-migrate-1.2.1.min.js"></script>
<script src="js/retina.js"></script>
<script src="js/camera.min.js"></script>
<script src="js/jquery.easing.1.3.js"></script>
<script src="js/waypoints.min.js"></script>
<script src="js/jquery.isotope.min.js"></script>
<script src="js/owl.carousel.min.js"></script>
<script src="js/jquery.custom-scrollbar.js"></script>
<script src="js/scripts.js"></script>
<script src="js/lightbox.js"></script>
<script src="js/angular.js"></script>
<script src="js/angular-resource.js"></script>
<script src="js/angular-route.js"></script>
<script src="js/angular-ui.min.js"></script>
<script src="js/angular-animate.js"></script>
<script src="js/sortable.js"></script>
<script src="js/ng-file-upload.js"></script>
<script src="js/ng-file-upload-shim.js"></script>
<script src="app/app.js"></script>
<script src="app/controllers.js"></script>
<script src="app/factory.js"></script>
<script src="app/filters.js"></script>

</body>
</html>

My controller
controllers.slideShowCtrl = function($scope, $location){
    $scope.slideShow = function(){
        if($location.url() == '/' || $location.url() == '/home'){
            $scope.slideShowView = true;
            return true;
        }else{
            $scope.slideShowView = false;
            return false;
        }
    }
}

And this is jQuery for creating slideshow
// camera slideshow
(function(){
    var cs = $('.camera_wrap');
    if(cs.length){
        cs.camera({
            height: '41%',
            navigation: true,
            pagination: true,
            playPause:false,
            thumbnails: false,
            time: 4000,
            transPeriod : 1000,
            navigationHover: false,
            onLoaded: function() {
                var image = $('.camera_wrap .camera_src > [data-src]'),
                    len = image.length,
                    bullet = $('.camera_wrap .camera_pag_ul > li');
                if(bullet.find('.custom_thumb').length) return;
                for(var i = 0; i < len; i++){
                    bullet.eq(i).append('<div class="custom_thumb tr_all_hover"><img src="' + image.eq(i).data('custom-thumb') + '" alt=""></div>');
                }
                bullet.on("mouseenter mouseleave",function(){
                    $(this).children('.custom_thumb').toggleClass("active");
                });
            }
        });
        cs.find('.camera_prev').append('<i class="fa fa-angle-left"></i>');
        cs.find('.camera_next').append('<i class="fa fa-angle-right"></i>');
    }
})();

The problem is here. On first load or reload (f5), slider looks ok and plays well. 

After clicking trough page and again visiting home (#/home), slider sometimes break, sometimes don't, sometimes it fixes by him self.

And again after refreshing web page slider works ok and plays well.
If you guys need any additional chunk of code, let me know and I will provide. 
Thank you

A:

Theorically when you put a JQ slideshow in angular view. You need to init everytime you access the view. Because on view/route changes your slideshow will be discarded from DOM, therefore all the content and instance of your slideshow will be discarded too.

The problem is here. On first load or reload (f5), slider looks ok and plays well.

Yes it should work because slideshow got initial welly

After clicking trough page and again visiting home (#/home), slider sometimes break, sometimes don't, sometimes it fixes by him self. 

The slide does not initial properly because it got discard from DOM when route/view changes
=> To make to work just simply re-init it again exactly after your view rendered.
// This is a dirty patch up, and only showing the fix in most basic way. So you could understand the concept of angular with other DOM manipulation like JQ.
// You should try to study more about DOM manipulation in angular. And for better solution, you can go with directive
controllers.slideShowCtrl = function($scope, $location, $timeout){
    $scope.slideShow = function(){
        if($location.url() == '/' || $location.url() == '/home'){
            $scope.slideShowView = true;
            return true;
        }else{
            $scope.slideShowView = false;
            return false;
        }

        // I just putting slideshow initial right after $scope.slideShow() return true.
        // To make sure slideshow got initial after the ng-show condition return true.
        $scope.$watch(function () {
            return $scope.slideShow();
        }, function (isShow) {

            // This $timeout to 100% sure slideshow initial only happen after view got all its base content rendered
            $timeout(function () {
                if(isShow){
                    var cs = $('.camera_wrap');
                    if(cs.length){
                        cs.camera({
                            height: '41%',
                            navigation: true,
                            pagination: true,
                            playPause:false,
                            thumbnails: false,
                            time: 4000,
                            transPeriod : 1000,
                            navigationHover: false,
                            onLoaded: function() {
                                var image = $('.camera_wrap .camera_src > [data-src]'),
                                    len = image.length,
                                    bullet = $('.camera_wrap .camera_pag_ul > li');
                                if(bullet.find('.custom_thumb').length) return;
                                for(var i = 0; i < len; i++){
                                    bullet.eq(i).append('<div class="custom_thumb tr_all_hover"><img src="' + image.eq(i).data('custom-thumb') + '" alt=""></div>');
                                }
                                bullet.on("mouseenter mouseleave",function(){
                                    $(this).children('.custom_thumb').toggleClass("active");
                                });
                            }
                        });
                        cs.find('.camera_prev').append('<i class="fa fa-angle-left"></i>');
                        cs.find('.camera_next').append('<i class="fa fa-angle-right"></i>');
                    }
                }
            }, 0)

        })
    }
}

P.S. 
please aware that, since we do not have any fiddle/plunker so to make sure the solution work, I apply some tricks that will put the highest possiblity for my answer to providing a workding code. You can try to remove $timeout to see if it worked

