Slider and Angular routing issue - angularjs

Question

I'm using slider in my web, it works when i used it in a simple page without Angular, but when i using Angular routing it does not work!! it makes me confuse, what is the problem?
this is the slider:
<div id="leo-slideshow" class="clearfix">
<div class="banner" style="padding-right: 20px !important;height:375px;padding: 0px; margin: 0px; overflow: visible;">
<div class="columns-container">
<div id="columns" class="container">
<div id="slider_row" class="row">
<div id="top_column" class="center_column col-xs-12 col-sm-12 col-md-12">
<!-- Module HomeSlider -->
<div id="homepage-slider" class="col-xs-8 col-sm-8 col-md-8">
<div class="bx-wrapper" style="max-width: 779px; margin: 0px auto;">
<div class="bx-viewport" style="width: 100%; overflow: hidden; position: relative; height: 448px;">
<ul id="homeslider" style="max-height: 448px; width: 515%; position: relative; left: -2336.98px;">
<li class="homeslider-container" style="float: left; list-style: none; position: relative; width: 779px;">
<a href="http://www.prestashop.com/?utm_source=back-office&utm_medium=v16_homeslider&utm_campaign=back-office-EN&utm_content=download" title="sample-2">
<img src="~/Content/Images/Slider/sample-2.jpg" width="779" height="448" alt="sample-2">
</a>
</li>
<li class="homeslider-container" style="float: left; list-style: none; position: relative; width: 779px;">
<a href="http://www.prestashop.com/?utm_source=back-office&utm_medium=v16_homeslider&utm_campaign=back-office-EN&utm_content=download" title="sample-3">
<img src="~/Content/Images/Slider/sample-3.jpg" width="779" height="448" alt="sample-3">
</a>
</li>
<li class="homeslider-container bx-clone" style="float: left; list-style: none; position: relative; width: 779px;">
<a href="http://www.prestashop.com/?utm_source=back-office&utm_medium=v16_homeslider&utm_campaign=back-office-EN&utm_content=download" title="sample-1">
<img src="~/Content/Images/Slider/sample-1.jpg" width="779" height="448" alt="sample-1">
</a>
</li>
</ul>
</div>
</div>
</div>
<!-- /Module HomeSlider -->
<div id="htmlcontent_top " class="animation_group_165 animated fadeInUp ">
<ul class="htmlcontent-home clearfix row">
<li class="htmlcontent-item-1 col-xs-4 col-sm-4 col-md-4 pull-left ">
<a href="http://www.prestashop.com/" class="item-link" title="">
<img src="~/Content/Images/SitePic/banner-img6.jpg" class="item-img " title="" alt="" width="381" height="219">
</a>
</li>
<li class="htmlcontent-item-2 col-xs-4 col-sm-4 col-md-4 ">
<a href="http://www.prestashop.com/" class="item-link" title="">
<img src="~/Content/Images/SitePic/banner-img7.jpg" class="item-img " title="" alt="" width="381" height="219">
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
and the script:
$(document).ready(function(){
if (typeof(homeslider_speed) == 'undefined')
homeslider_speed = 500;
if (typeof(homeslider_pause) == 'undefined')
homeslider_pause = 3000;
if (typeof(homeslider_loop) == 'undefined')
homeslider_loop = true;
if (typeof(homeslider_width) == 'undefined')
homeslider_width = 779;
$('.homeslider-description').click(function () {
window.location.href = $(this).prev('a').prop('href');
});
if ($('#htmlcontent_top').length > 0)
$('#homepage-slider').addClass('col-xs-8');
else
$('#homepage-slider').addClass('col-xs-12');
if (!!$.prototype.bxSlider)
$('#homeslider').bxSlider({
useCSS: false,
maxSlides: 1,
slideWidth: homeslider_width,
infiniteLoop: homeslider_loop,
hideControlOnEnd: true,
pager: false,
autoHover: true,
auto: homeslider_loop,
speed: parseInt(homeslider_speed),
pause: homeslider_pause,
controls: true
});
});
Note: i am using bxslider.