What is the correct order of loading AngularJS files?

Question

I encountered a problem where my AngularJS webpages don't load properly sometimes. When this happens, the code in the corresponding controller does not run. It only happens rarely. I suspect that this could be due to the loading order of AngularJS files. Perhaps there are other possible causes. Please alert me if you can think of any. Below is my code showing the loading order of the html page;

    <script src="lib/angular/angular.min.js"></script>
    <script src="lib/angular/angular-route.min.js"></script>
    <script src="js/app.js"></script>
    <script src="js/services.js"></script>
    <script src="js/controllers.js"></script>
    <script src="js/filters.js"></script>
    <script src="js/directives.js"></script>        
    <script src="vendor/dialogs.min.js" type="text/javascript"></script>       
    <script src="lib/angular/angular-sanitize.min.js"></script>   
    <script src="vendor/angular-translate.min.js"></script>  
    <link href="vendor/dialogs.css" rel="stylesheet">   

Is there anything wrong?

Answer 1

First Load angular library:

<script src="lib/angular/angular.min.js"></script>
<script src="lib/angular/angular-route.min.js"></script>
<script src="vendor/dialogs.min.js" type="text/javascript"></script>       
<script src="lib/angular/angular-sanitize.min.js"></script>   
<script src="vendor/angular-translate.min.js"></script>  

After that load your controllers, services, filters, directives

<script src="js/services.js"></script>
<script src="js/controllers.js"></script>
<script src="js/filters.js"></script>
<script src="js/directives.js"></script>        

Finally, now you can load your app init file

<script src="js/app.js"></script>