title: Custom Angualr JS / Material / Datatables app - Required script load order dependent of page
body: <p>Below are my top two declarations on above closing body tag.</p>
  
  <p>This order produces correct results on a page a material dropdown. But, I need to swap order of the two script tags to make it work with my datatables page, which is a separate page from this page.  If I dont swap before page request,  one page works, the other breaks, does not load / or produce proper rendered output.</p>
  
  <p>I am using also ocLazyLoad to load my non static scripts (controllers corresponding to the template linked to my page)</p>
  
  <p>What is going on?  How do I resolve this load order page dependency?</p>
  
  <p>These script are ordered but their order is page dependent to function correctly</p>
  
  <pre><code>&lt;script src="/app/js/angularjs-1.6.6/angular.min.js"&gt;&lt;/script&gt;
  &lt;script src="/app/js/jquery-slim-3.2.1/jquery-3.2.1.slim.min.js"&gt;&lt;/scrip
  </code></pre>
  
  <p>These follow but are not page dependent,  they are acceptable as is</p>
  
  <pre><code>&lt;script src="/app/js/angular-material-1.1.12/angular-material.min.js"&gt;&lt;/script&gt;
  &lt;script src="/app/js/jquery-datatables-1.10.19/jquery.dataTables.min.js" &gt;&lt;/script&gt;
  &lt;script src="/app/js/datatables-fixedheader-3.1.5/dataTables.fixedHeader.min.js"&gt;&lt;/script&gt;
  &lt;script src="/app/js/angular-datatables-0.6.2/angular-datatables.min.js"&gt;&lt;/script&gt;
  &lt;script src="/app/js/angular-datatables-0.6.2/plugins/fixedheader/angular-datatables.fixedheader.min.js"&gt;&lt;/script&gt;
  &lt;script src="/app/js/angular-datatables-0.6.2/plugins/scroller/angular-datatables.scroller.min.js"&gt;&lt;/script&gt;
  </code></pre>
  
  <p>EDIT</p>
  
  <p>Rearranging the script tags resolved the datatables page, but breaks the material select drop down page.</p>
  
  <pre><code>   &lt;script src="/app/js/jquery-slim-3.2.1/jquery-3.2.1.slim.min.js"&gt;&lt;/script&gt;
     &lt;script src="/app/js/angularjs-1.6.6/angular.min.js"&gt;&lt;/script&gt;
     &lt;script src="/app/js/angular-material-1.1.12/angular-material.min.js"&gt;&lt;/script&gt;
     &lt;script src="/app/js/jquery-datatables-1.10.19/jquery.dataTables.min.js" &gt;&lt;/script&gt;
     &lt;script src="/app/js/angular-datatables-0.6.2/angular-datatables.js"&gt;&lt;/script&gt;
     &lt;script src="/app/js/datatables-fixedheader-3.1.5/dataTables.fixedHeader.min.js"&gt;&lt;/script&gt;
     &lt;script src="/app/js/angular-datatables-0.6.2/plugins/fixedheader/angular-datatables.fixedheader.min.js"&gt;&lt;/script&gt;
     &lt;script src="/app/js/angular-datatables-0.6.2/plugins/scroller/angular-datatables.scroller.min.js"&gt;&lt;/script&gt;11
     &lt;script src="/app/js/popper-1.12.9/popper.min.js"&gt;&lt;/script&gt;
     &lt;script src="/app/js/bootstrap-4.0.0/bootstrap.min.js"&gt;&lt;/script&gt;
     &lt;script src="/app/js/angularjs-1.6.6/angular-route.min.js"&gt;&lt;/script&gt;
     &lt;script src="/app/js/angularjs-1.6.6/angular-ui-router.js"&gt;&lt;/script&gt;
     &lt;script src="/app/js/angularjs-1.6.6/statehelper.js"&gt;&lt;/script&gt;
     &lt;script src="/app/js/angularjs-1.6.6/angular-resource.js"&gt;&lt;/script&gt;
     &lt;script src="/app/js/angularjs-1.6.6/angular-aria.js"&gt;&lt;/script&gt;
     &lt;script src="/app/js/angularjs-1.6.6/angular-animate.js"&gt;&lt;/script&gt;
     &lt;script src="/app/js/angularjs-1.6.6/angular-messages.js"&gt;&lt;/script&gt;
     &lt;script src="/app/js/ocLazyLoad/ocLazyLoad.js"&gt;&lt;/script&gt;
     &lt;script src="/app/route-config.js"&gt;&lt;/script&gt; 
     &lt;script src="/app/app.js"&gt;&lt;/script&gt;
  </code></pre>
  
  <blockquote>
    <p><em>Controller 'mdSelectMenu', required by directive 'mdOption', can't be found!</em></p>
  </blockquote>
  
  <p>Material Select Drop Down Page</p>
  
  <pre><code>&lt;md-content ng-controller="CreateActionController" ng-init="init()" ng-app="Action" layout-padding="" ng-cloak=""&gt;
  &lt;div layout-gt-xs="row"&gt;
      &lt;div flex-gt-xs&gt;
        &lt;md-select placeholder="Assign to user" ng-model="users"  style="min-width: 200px;"/&gt;
          &lt;md-option ng-model="user" ng-value="user" ng-repeat="user in users track by user.userid"&gt;{{user.name}}&lt;/md-option&gt;
        &lt;/md-select&gt;
      &lt;/div&gt;
      &lt;div flex-gt-xs&gt;
        &lt;h6&gt;Opening the calendar when the input is focused&lt;/h6&gt;
        &lt;md-datepicker ng-model="myDate" md-min-date="minDate" md-placeholder="Enter date" md-open-on-focus&gt;&lt;/md-datepicker&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;/md-content&gt;
  </code></pre>