My top two declarations placed above the closing body tag.
When used in a material dropdown page, the current order of these scripts works fine. However, when I switch to my datatables page (which is a separate page), I need to swap the order of the two script tags. If I don't make this change before the page request, one page functions correctly while the other fails to load or display the proper output.
I am also incorporating ocLazyLoad to load my non-static scripts (controllers linked to the template on my page).
Why is this happening? How can I solve this dependency issue with the loading order of the pages?
The following scripts are ordered, but their correct functioning depends on which page they are being used
<script src="/app/js/angularjs-1.6.6/angular.min.js"></script>
<script src="/app/js/jquery-slim-3.2.1/jquery-3.2.1.slim.min.js"></scrip
The scripts that follow are not page dependent and are acceptable in their current order
<script src="/app/js/angular-material-1.1.12/angular-material.min.js"></script>
<script src="/app/js/jquery-datatables-1.10.19/jquery.dataTables.min.js" ></script>
<script src="/app/js/datatables-fixedheader-3.1.5/dataTables.fixedHeader.min.js"></script>
<script src="/app/js/angular-datatables-0.6.2/angular-datatables.min.js"></script>
<script src="/app/js/angular-datatables-0.6.2/plugins/fixedheader/angular-datatables.fixedheader.min.js"></script>
<script src="/app/js/angular-datatables-0.6.2/plugins/scroller/angular-datatables.scroller.min.js"></script>
UPDATE
Switching the order of the script tags fixed the datatable page but caused issues with the material select dropdown page.
<script src="/app/js/jquery-slim-3.2.1/jquery-3.2.1.slim.min.js"></script>
<script src="/app/js/angularjs-1.6.6/angular.min.js"></script>
<script src="/app/js/angular-material-1.1.12/angular-material.min.js"></script>
<script src="/app/js/jquery-datatables-1.10.19/jquery.dataTables.min.js" ></script>
<script src="/app/js/angular-datatables-0.6.2/angular-datatables.js"></script>
<script src="/app/js/datatables-fixedheader-3.1.5/dataTables.fixedHeader.min.js"></script>
<script src="/app/js/angular-datatables-0.6.2/plugins/fixedheader/angular-datatables.fixedheader.min.js"></script>
<script src="/app/js/angular-datatables-0.6.2/plugins/scroller/angular-datatables.scroller.min.js"></script>11
<script src="/app/js/popper-1.12.9/popper.min.js"></script>
<script src="/app/js/bootstrap-4.0.0/bootstrap.min.js"></script>
<script src="/app/js/angularjs-1.6.6/angular-route.min.js"></script>
<script src="/app/js/angularjs-1.6.6/angular-ui-router.js"></script>
<script src="/app/js/angularjs-1.6.6/statehelper.js"></script>
<script src="/app/js/angularjs-1.6.6/angular-resource.js"></script>
<script src="/app/js/angularjs-1.6.6/angular-aria.js"></script>
<script src="/app/js/angularjs-1.6.6/angular-animate.js"></script>
<script src="/app/js/angularjs-1.6.6/angular-messages.js"></script>
<script src="/app/js/ocLazyLoad/ocLazyLoad.js"></script>
<script src="/app/route-config.js"></script>
<script src="/app/app.js"></script>
Controller 'mdSelectMenu', required by directive 'mdOption', can't be found!
Material Select Drop Down Page
<md-content ng-controller="CreateActionController" ng-init="init()" ng-app="Action" layout-padding="" ng-cloak="">
<div layout-gt-xs="row">
<div flex-gt-xs>
<md-select placeholder="Assign to user" ng-model="users" style="min-width: 200px;"/>
<md-option ng-model="user" ng-value="user" ng-repeat="user in users track by user.userid">{{user.name}}</md-option>
</md-select>
</div>
<div flex-gt-xs>
<h6>Opening the calendar when the input is focused</h6>
<md-datepicker ng-model="myDate" md-min-date="minDate" md-placeholder="Enter date" md-open-on-focus></md-datepicker>
</div>
</div>
</md-content>