I downloaded a free template and I'm trying to adjust it with angularjs, but the problem I have is that the animations, carousels of images or navigation between divs does not work.
I would like to know what I should do to solve this problem
then I share what I have:
index .html
<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!-->
<html class="no-js"> <!--<![endif]-->
<head>
<!--Angularjs-->
<script src="angularjs/angular.min.js"></script>
<script src="angularjs/angular-resource.min.js"></script>
<script src="angularjs/angular-cookies.min.js"></script>
<script src="lib/angular-ui-router.min.js"></script>
<script src="app/app.js"></script>
<script src="app/features.mod.js"></script>
<script src="app/logueo/login.ctrl.js"></script>
<!--Web-->
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="description" content="Meghna One page parallax responsive HTML Template ">
<meta name="author" content="Muhammad Morshed">
<title>Qorner | Reserva de canchas sintéticas</title>
<!-- Mobile Specific Meta
================================================== -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Favicon -->
<link rel="shortcut icon" type="image/x-icon" href="img/favicon.png" />
<!-- CSS
================================================== -->
<!-- Fontawesome Icon font -->
<link rel="stylesheet" href="css/font-awesome.min.css">
<!-- bootstrap.min css -->
<link rel="stylesheet" href="css/bootstrap.min.css">
<!-- Animate.css -->
<link rel="stylesheet" href="css/animate.css">
<!-- Owl Carousel -->
<link rel="stylesheet" href="css/owl.carousel.css">
<!-- Grid Component css -->
<link rel="stylesheet" href="css/component.css">
<!-- Slit Slider css -->
<link rel="stylesheet" href="css/slit-slider.css">
<!-- Main Stylesheet -->
<link rel="stylesheet" href="css/main.css">
<!-- Media Queries -->
<link rel="stylesheet" href="css/media-queries.css">
<!--
Google Font
=========================== -->
<!-- Oswald / Title Font -->
<link href='http://fonts.googleapis.com/css?family=Oswald:400,300' rel='stylesheet' type='text/css'>
<!-- Ubuntu / Body Font -->
<link href='http://fonts.googleapis.com/css?family=Ubuntu:400,300' rel='stylesheet' type='text/css'>
<!-- Modernizer Script for old Browsers -->
<script src="js/modernizr-2.6.2.min.js"></script>
</head>
<body id="body" ng-app="starter">
<!--
Start Preloader
==================================== -->
<div id="loading-mask">
<div class="loading-img">
<img alt="Meghna Preloader" src="img/preloader.gif" />
</div>
</div>
<!--
End Preloader
==================================== -->
<main>
<div ui-view></div>
</main>
<footer id="footer" class="bg-one">
<div class="container">
<div class="row wow fadeInUp" data-wow-duration="500ms">
<div class="col-lg-12">
<!-- Footer Social Links -->
<div class="social-icon">
<ul>
<li><img src="img/quercusIcon.png" alt="Meghna" width="200" height="150" /></li>
</ul>
</div>
<div class="copyright text-center">
<p>Desarrollado por QuercusDev. Copyright © 2017. Totdos los derechos reservados.</p>
<br>
<div class="portfolio-filter clearfix">
<ul class="text-center">
<li><a href="#"><i class="fa fa-facebook"></i> | @quercusdev</a></li>
<li><a href="#"><i class="fa fa-twitter"></i> | @quercusdev</a></li>
<li><a href="#"><i class="fa fa-instagram"></i> | @quercusdev</a></li>
</ul>
</div>
</div>
</div> <!-- end col lg 12 -->
</div> <!-- end row -->
</div> <!-- end container -->
</footer> <!-- end footer -->
<!-- Back to Top
============================== -->
<a href="javascript:;" id="scrollUp">
<i class="fa fa-angle-up fa-2x"></i>
</a>
<!-- end Footer Area
========================================== -->
<!--
Essential Scripts
=====================================-->
<!-- Main jQuery -->
<script src="js/jquery-1.12.2.min.js"></script>
<!-- Bootstrap 3.1 -->
<script src="js/bootstrap.min.js"></script>
<!-- Slitslider -->
<script src="js/jquery.slitslider.js"></script>
<script src="js/jquery.ba-cond.min.js"></script>
<!-- Parallax -->
<script src="js/jquery.parallax-1.1.3.js"></script>
<!-- Owl Carousel -->
<script src="js/owl.carousel.min.js"></script>
<!-- Portfolio Filtering -->
<script src="js/jquery.mixitup.min.js"></script>
<!-- Custom Scrollbar -->
<script src="js/jquery.nicescroll.min.js"></script>
<!-- Jappear js -->
<script src="js/jquery.appear.js"></script>
<!-- Pie Chart -->
<script src="js/easyPieChart.js"></script>
<!-- jQuery Easing -->
<script src="js/jquery.easing-1.3.pack.js"></script>
<!-- Highlight menu item -->
<script src="js/jquery.nav.js"></script>
<!-- Sticky Nav -->
<script src="js/jquery.sticky.js"></script>
<!-- Number Counter Script -->
<script src="js/jquery.countTo.js"></script>
<!-- wow.min Script -->
<script src="js/wow.min.js"></script>
<!-- For video responsive -->
<script src="js/jquery.fitvids.js"></script>
<!-- Grid js -->
<script src="js/grid.js"></script>
<!-- Custom js -->
<script src="js/custom.js"></script>
</body>
</html>
Login html (view with problem):
<!-- Welcome Slider ==================================== -->
<section id="home">
<div id="slitSlider" class="sl-slider-wrapper">
<div class="sl-slider">
<!-- single slide item -->
<div class="sl-slide" data-orientation="horizontal" data-slice1-rotation="-25" data-slice2-rotation="-25" data-slice1-scale="2" data-slice2-scale="2">
<div class="sl-slide-inner">
<div class="bg-img bg-img-1"></div>
<div class="carousel-caption">
<div>
<h2 data-wow-duration="500ms" data-wow-delay="500ms" class="heading animated fadeInRight">Bienvenido
</div>
</div>
</div>
</div>
<!-- /single slide item -->
<!-- single slide item -->
<div class="sl-slide" data-orientation="vertical" data-slice1-rotation="10" data-slice2-rotation="-15" data-slice1-scale="1.5" data-slice2-scale="1.5">
<div class="sl-slide-inner">
<div class="bg-img bg-img-2"></div>
<div class="carousel-caption">
<div>
<h2 class="heading animated fadeInDown">Highly Responsive</h2>
<h3 class="animated fadeInUp">With all Mejor Browser support including IE 9</h3>
<a class="btn btn-green animated fadeInUp" href="#">Get Started</a>
</div>
</div>
</div>
</div>
<!-- /single slide item -->
<!-- single slide item -->
<div class="sl-slide" data-orientation="horizontal" data-slice1-rotation="3" data-slice2-rotation="3" data-slice1-scale="2" data-slice2-scale="1">
<div class="sl-slide-inner">
<div class="bg-img bg-img-3"></div>
<div class="carousel-caption">
<div>
<h2 class="heading animated fadeInRight">One Page Parallax HTML Template</h2>
<h3 class="animated fadeInLeft">Clean and Professional Design</h3>
<a class="btn btn-green animated fadeInUp" href="#">Learn More</a>
</div>
</div>
</div>
</div>
<!-- /single slide item -->
</div><!-- /sl-slider -->
<nav id="nav-arrows" class="nav-arrows">
<span class="nav-arrow-prev">Previous</span>
<span class="nav-arrow-next">Next</span>
</nav>
<nav id="nav-dots" class="nav-dots">
<span class="nav-dot-current"></span>
<span></span>
<span></span>
</nav>
</div><!-- /slider-wrapper -->
</section>
<!--/#home section-->
<!--
Fixed Navigation
==================================== -->
<header id="navigation" class="navbar navbar-inverse">
<div class="container">
<div class="navbar-header">
<!-- responsive nav button -->
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<!-- /responsive nav button -->
<!-- logo -->
<a class="navbar-brand" href="#body">
<h1 id="logo">
<span class="color">Qorner</span>
</h1>
</a>
<!-- /logo -->
</div>
<!-- main nav -->
<nav class="collapse navbar-collapse navbar-right" role="Navigation">
<ul id="nav" class="nav navbar-nav">
<li class="current"><a href="#body">Inicio</a></li>
<li><a href="#about">¿Cómo funciona?</a></li>
<li><a href="#showcase">Ej</a></li>
<li><a href="#services">Ej2</a></li>
<li><a href="#pricing">Ej3</a></li>
<li><a href="#contact-us">Ej4</a></li>
<li>
<button type="button" class="btn btn-transparent" data-toggle="modal" data-target=".bs-example-modal-lg">
Inicio de sesión
</button>
</li>
</ul>
</nav>
<!-- /main nav -->
</div>
</header>
<section id="showcase">
<div class="container">
<div class="row wow fadeInDown" data-wow-duration="500ms">
<div class="col-lg-12">
<!-- section title -->
<div class="title text-center">
<h2><span class="color">Canchas sintéticas</span></h2>
<div class="border"></div>
</div>
<!-- /section title -->
<!-- portfolio item filtering -->
<div class="portfolio-filter clearfix">
<ul class="text-center">
<li><a href="javascript:void(0)" class="filter" data-filter="all">Todas</a></li>
<li><a href="javascript:void(0)" class="filter" data-filter=".app">Norte</a></li>
<li><a href="javascript:void(0)" class="filter" data-filter=".web">Centro</a></li>
<li><a href="javascript:void(0)" class="filter" data-filter=".photoshop">Sur</a></li>
<li><a href="javascript:void(0)" class="filter" data-filter=".illustrator">¿Quieres formar parte de esta comunidad?</a></li>
</ul>
</div>
<!-- /portfolio item filtering -->
</div> <!-- /end col-lg-12 -->
</div> <!-- end row -->
</div> <!-- end container -->
<!-- portfolio items -->
<div class="portfolio-item-wrapper wow fadeInUp" data-wow-duration="500ms">
<ul id="og-grid" class="og-grid">
<!-- single portfolio item -->
<li class="mix app">
<a href="javascript:void(0)" data-largesrc="img/portfolio/portx1.jpg" data-title="Azuki bean" data-description="Swiss chard pumpkin bunya nuts maize plantain aubergine napa cabbage soko coriander sweet pepper water spinach winter purslane shallot tigernut lentil beetroot.">
<img src="img/portfolio/portx1.jpg" alt="Meghna">
<div class="hover-mask">
<h3>Azuki bean</h3>
<span>
<i class="fa fa-plus fa-2x"></i>
</span>
</div>
</a>
</li>
<!-- /single portfolio item -->
<!-- single portfolio item -->
<li class="mix web">
<a href="javascript:void(0)" data-largesrc="img/portfolio/portx1.jpg" data-title="Veggies sunt bona vobis" data-description="Komatsuna prairie turnip wattle seed artichoke mustard horseradish taro rutabaga ricebean carrot black-eyed pea turnip greens beetroot yarrow watercress kombu.">
<img src="img/portfolio/portx1.jpg" alt="Meghna">
<div class="hover-mask">
<h3>Veggies sunt bona vobis</h3>
<span>
<i class="fa fa-plus fa-2x"></i>
</span>
</div>
</a>
</li>
<!-- /single portfolio item -->
<!-- single portfolio item -->
<li class="mix photoshop">
<a href="javascript:void(0)" data-largesrc="img/portfolio/portx1.jpg" data-title="Dandelion horseradish" data-description="Cabbage bamboo shoot broccoli rabe chickpea chard sea lettuce lettuce ricebean artichoke earthnut pea aubergine okra brussels sprout avocado tomato.">
<img src="img/portfolio/portx1.jpg" alt="Meghna">
<div class="hover-mask">
<h3>Dandelion horseradish</h3>
<span>
<i class="fa fa-plus fa-2x"></i>
</span>
</div>
</a>
</li>
<!-- /single portfolio item -->
<!-- single portfolio item -->
<li class="mix illustrator">
<a href="javascript:void(0)" data-largesrc="img/portfolio/portx1.jpg" data-title="Qplay" data-description="Si posees una cancha sintética y quieres unirte a nuestra comunidad, contacta con nosotros.">
<img src="img/portfolio/portx1.jpg" alt="Meghna">
<div class="hover-mask">
<h3>Quiero unirme</h3>
<span>
<i class="fa fa-plus fa-2x"></i>
</span>
</div>
</a>
</li>
<!-- /single portfolio item -->
<!-- single portfolio item -->
<li class="mix app">
<a href="javascript:void(0)" data-largesrc="img/portfolio/portx1.jpg" data-title="Azuki bean" data-description="Swiss chard pumpkin bunya nuts maize plantain aubergine napa cabbage soko coriander sweet pepper water spinach winter purslane shallot tigernut lentil beetroot.">
<img src="img/portfolio/portx1.jpg" alt="Meghna">
<div class="hover-mask">
<h3>Azuki bean</h3>
<span>
<i class="fa fa-plus fa-2x"></i>
</span>
</div>
</a>
</li>
<!-- /single portfolio item -->
<!-- single portfolio item -->
<li class="mix app">
<a href="javascript:void(0)" data-largesrc="img/portfolio/portx1.jpg" data-title="Veggies sunt bona vobis" data-description="Komatsuna prairie turnip wattle seed artichoke mustard horseradish taro rutabaga ricebean carrot black-eyed pea turnip greens beetroot yarrow watercress kombu.">
<img src="img/portfolio/portx1.jpg" alt="Meghna">
<div class="hover-mask">
<h3>Veggies sunt bona vobis</h3>
<span>
<i class="fa fa-plus fa-2x"></i>
</span>
</div>
</a>
</li>
<!-- /single portfolio item -->
<!-- single portfolio item -->
<li class="mix web">
<a href="javascript:void(0)" data-largesrc="img/portfolio/portx1.jpg" data-title="Dandelion horseradish" data-description="Cabbage bamboo shoot broccoli rabe chickpea chard sea lettuce lettuce ricebean artichoke earthnut pea aubergine okra brussels sprout avocado tomato.">
<img src="img/portfolio/portx1.jpg" alt="Meghna">
<div class="hover-mask">
<h3>Dandelion horseradish</h3>
<span>
<i class="fa fa-plus fa-2x"></i>
</span>
</div>
</a>
</li>
<!-- /single portfolio item -->
<!-- single portfolio item -->
<li class="mix photoshop">
<a href="javascript:void(0)" data-largesrc="img/portfolio/portx1.jpg" data-title="Azuki bean" data-description="Swiss chard pumpkin bunya nuts maize plantain aubergine napa cabbage soko coriander sweet pepper water spinach winter purslane shallot tigernut lentil beetroot.">
<img src="img/portfolio/portx1.jpg" alt="Meghna">
<div class="hover-mask">
<h3>Azuki bean</h3>
<span>
<i class="fa fa-plus fa-2x"></i>
</span>
</div>
</a>
</li>
<!-- /single portfolio item -->
<!-- single portfolio item -->
<li class="mix photoshop">
<a href="javascript:void(0)" data-largesrc="img/portfolio/portx1.jpg" data-title="Veggies sunt bona vobis" data-description="Komatsuna prairie turnip wattle seed artichoke mustard horseradish taro rutabaga ricebean carrot black-eyed pea turnip greens beetroot yarrow watercress kombu.">
<img src="img/portfolio/portx1.jpg" alt="Meghna">
<div class="hover-mask">
<h3>Veggies sunt bona vobis</h3>
<span>
<i class="fa fa-plus fa-2x"></i>
</span>
</div>
</a>
</li>
<!-- /single portfolio item -->
<!-- single portfolio item -->
<li class="mix web">
<a href="javascript:void(0)" data-largesrc="img/portfolio/portx1.jpg" data-title="Dandelion horseradish" data-description="Cabbage bamboo shoot broccoli rabe chickpea chard sea lettuce lettuce ricebean artichoke earthnut pea aubergine okra brussels sprout avocado tomato.">
<img src="img/portfolio/portx1.jpg" alt="Meghna">
<div class="hover-mask">
<h3>Dandelion horseradish</h3>
<span>
<i class="fa fa-plus fa-2x"></i>
</span>
</div>
</a>
</li>
<!-- /single portfolio item -->
<!-- single portfolio item -->
<li class="mix app">
<a href="javascript:void(0)" data-largesrc="img/portfolio/portx1.jpg" data-title="Azuki bean" data-description="Swiss chard pumpkin bunya nuts maize plantain aubergine napa cabbage soko coriander sweet pepper water spinach winter purslane shallot tigernut lentil beetroot.">
<img src="img/portfolio/portx1.jpg" alt="Meghna">
<div class="hover-mask">
<h3>Azuki bean</h3>
<span>
<i class="fa fa-plus fa-2x"></i>
</span>
</div>
</a>
</li>
<!-- /single portfolio item -->
</ul> <!-- end og grid -->
</div> <!-- portfolio items wrapper -->
</section> <!-- End section -->
Finally when I add these sections in my index there is no problem jquery works correctly but if I leave it in the part I want Login html does not work Thank you in advance