Slide show does not show on the angular view
<p>I'm new to angular and i'm trying to convert a responsive template into angularJS, I created 2 directives for (header, footer) and view to display content of each template.
the problem exists in the home template where the slide show is in as the page loads completely but without the camera slide show.</p>

<p><strong>Updated</strong>
that's the last working simplest version of my code</p>

<p>Here is my main page: </p>

<pre><code>&lt;head&gt;

&lt;!--CSS--&gt;
&lt;link rel="stylesheet" href="css/bootstrap.css"&gt;
&lt;link rel="stylesheet" href="css/bootstrap.min.css"&gt;
&lt;link rel="stylesheet" href="css/responsive.css"&gt;
&lt;link rel="stylesheet" href="css/style.css"&gt;
&lt;link rel="stylesheet" href="css/camera.css"&gt;
&lt;!--JS--&gt;
&lt;script src="js/jquery.js"&gt;&lt;/script&gt;
&lt;script src="js/jquery-migrate-1.1.1.js"&gt;&lt;/script&gt;
&lt;script src="js/superfish.js"&gt;&lt;/script&gt;
&lt;script src="js/jquery.mobilemenu.js"&gt;&lt;/script&gt;
&lt;script src="js/jquery.easing.1.3.js"&gt;&lt;/script&gt;
&lt;script src="js/camera.js"&gt;&lt;/script&gt;
&lt;script src="js/jquery.ui.totop.js"&gt;&lt;/script&gt;
&lt;script type="text/javascript" src="js/jquery.mobile.customized.min.js"&gt;                          &lt;/script&gt;

&lt;/head&gt;
&lt;body ng-controller="MainController"&gt;
&lt;!--header--&gt;
&lt;header-dir&gt;&lt;/header-dir&gt;
&lt;!-- content --&gt;
&lt;div ng-view&gt;&lt;/div&gt;
&lt;!-- footer --&gt;
&lt;footer-dir&gt;&lt;/footer-dir&gt;

&lt;!-- scripts --&gt;
&lt;script type="text/javascript" src="js/bootstrap.js"&gt;&lt;/script&gt;
&lt;!-- SPELLS --&gt;
&lt;script src="js/angular.min.js"&gt;&lt;/script&gt;
&lt;script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-route.js"&gt;&lt;/script&gt;
&lt;script src="app.config.js"&gt;&lt;/script&gt;
&lt;script src="Controllers/MainController.controller.js"&gt;&lt;/script&gt;
&lt;/body&gt;
</code></pre>

<p>app.config.js file</p>

<pre><code>var app = angular.module("levariApp", ['ngRoute']);

app.config(function($routeProvider) {
    $routeProvider
    .when('/', {
        templateUrl: 'Views/home.template.html',
        controller: 'MainController'
    });
});
</code></pre>

<p>and MainController.controller.js file</p>

<pre><code>angular.module("levariApp")
.controller('MainController', function($scope){

})
.directive("headerDir", function(){
    return {
        templateUrl: 'Views/header.template.html'
    };
}).directive("footerDir", function(){
    return {
        templateUrl: 'Views/footer.template.html'
    };
});
</code></pre>

<p>I really don't know what i'm missing, hope you guys can help</p>