Javascript 在angular中使用route时，jquery ui中的滑块无法正常工作

当我直接运行这个文件时，它基本上起作用（滑块显示）。但是当我运行index.html并通过angular ui route调用它时，滑块不再显示。当使用href标记链接到此文件时，它也起作用。请帮忙，我已经修了一整天了。 注：如果我需要显示更多代码（如控制器或服务），您可以告诉我。 谢谢

$（函数（）{
$（'#slider1'）。滑块({
数值：12，
民:10,，
最高：20，
步骤：1，
幻灯片：功能（事件、用户界面）{
$（'font#u size'）.val（ui.value+'px'）；
$（'.box'）.css（'font-size'，ui.value）；
}
});
}); 
带有jQuery和UI滑块的文本动画

字体大小：

一名男子贿赂了一只假牙不好的兔子，让它乘着帆船通过救护车逃走。贿赂考拉非法留在一个地方。树把我固定在适当的地方你妈妈开着救护车，但这座城市比它看起来要远。

<link rel="stylesheet" href="css/jquery.ui.theme.css" type="text/css" />
<link rel="stylesheet" href="css/jquery.ui.slider.css" type="text/css" />
<link rel="stylesheet" href="css/main.css" type="text/css" />

<script src="js/jquery.min.js"></script>
<script src="js/jquery.ui.core.js"></script>
<script src="js/jquery.ui.widget.js"></script>
<script src="js/jquery.ui.mouse.js"></script>
<script src="js/jquery.ui.slider.js"></script>

<script type="text/javascript">
$(function() {
    $('#slider1').slider({
        value:12,
        min: 10,
        max: 20,
        step: 1,
        slide: function( event, ui ) {
            $('#font_size').val(ui.value + ' px');
            $('.box').css('font-size', ui.value);
        }
    });
    }); 

</script>

<div class="examples">
    <h2>Text animation with jQuery and UI slider</h2>
    <div class="column">
        <p>
            <label for="font_size">Font size:</label>
            <input type="text" id="font_size" style="border:0; color:#f6931f; font-weight:bold;" />
        </p>
        <div id="slider1"></div>
    </div>

    <div class="box">A man bribes a rabbit with wicked dentures to run away with him in a sailboat via an ambulance. Bribing Koalas to remain illegally in one place. Trees anchor me in place. / Your mom drives the ambulance, but the city is farther than it appears.</div>
    <div style="clear:both"></div>
</div>