The script loads before ng-view has loaded (Angularjs)

Question

I’m having trouble with the following situation: I have a ng-view on my page, but I need two scripts I implement at the bottom of the page hold on my ng-view load for them to interact with the classes of the elements within my ng-view. These are the scripts "scrollreveal.js" and "magnific-popup.min.js" Code below:

<ng-view></ng-view>



<!--Core JS-->
<script src="js/jquery.js"></script>
<script src="js/bootstrap.min.js"></script>

<!--AngularJS-->
<script src="app/AngularJS/angular.min.js"></script>
<script src="app/AngularJS/angular-route.min.js"></script>

<!--App-->
<script src="app/app.js"></script>

<!--Routes-->
<script src="app/routes.js"></script>

<!--Directives-->
<!--<script src="app/directives/frameworks-directive.js"></script>-->

<!--Controllers-->

<!--Frameworks JS-->
<script src="js/scrollreveal.js"></script>
<script src="js/jquery.easing.min.js"></script>
<script src="js/jquery.fittext.js"></script>
<script src="js/jquery.magnific-popup.min.js"></script>
<script src="js/creative.js"></script>

Answer 1

If you do not set the dependencies of a module in its creation or in configuration blocks, Angular will load the scripts asynchronously, not ensuring that the desired sequence is followed.

Behold that link to understand how this works and implement in your code.

Answer 2

After specifying your controller in the $routeProvider, use the controller to load scripts. In this case, remove them from the body:

app.controller('yourCtrl', function ($scope) {
   $scope.load = function() {
       var script1 = document.createElement('script');
       var script2 = document.createElement('script');
       script1.type = 'text/javascript';
       script2.type = 'text/javascript';
       script1.src = "js/jquery.magnific-popup.min.js";
       script2.src = "js/scrollreveal.js";
       document.body.appendChild(script1);
       document.body.appendChild(script2);
   };
   $scope.load();
});