AngularJS templates not showing on page but are there when page is inspected
<p>I am new to using Angular and Rails and have gotten stuck when I imported my Angular project into a Rails project and split the templates into individual files. Now the nav and footer partials show, but the templates will not load on the page. I am getting this error in the browser console:</p>

<p>"Uncaught Error: [$injector:nomod] Module 'galleryApp' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument"</p>

<p>When I inspect the page the template is there. Let me know if I can provide any more information to help. Thanks in advance for the help!</p>

<p>application.html.erb</p>

<pre><code> &lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;title&gt;Gallery&lt;/title&gt;
  &lt;meta charset="utf-8"&gt;
  &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
  &lt;link href="https://fonts.googleapis.com/css?family=Poiret+One" rel="stylesheet"&gt;
  &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://use.fontawesome.com/6e04e9b3c4.js"&gt;&lt;/script&gt;
  &lt;%= stylesheet_link_tag    'application', media: 'all' %&gt;
  &lt;%= javascript_include_tag 'application' %&gt;
  &lt;%= csrf_meta_tags %&gt;
  &lt;/head&gt;

  &lt;body ng-app="galleryApp"&gt;

    &lt;div ng-include="'nav/_nav.html'"&gt;&lt;/div&gt;
    &lt;ui-view&gt;&lt;/ui-view&gt;
    &lt;div ng-include="'footer/_footer.html'"&gt;&lt;/div&gt;

  &lt;/body&gt;
  &lt;/html&gt;
</code></pre>

<p>app.js</p>

<pre><code>var app = angular.module('galleryApp', ['ui.router', 'templates']);

app.config([
  '$stateProvider',
  '$urlRouterProvider',
  function($stateProvider, $urlRouterProvider) {

    $stateProvider
      .state('teleport', {
        url: '/teleport',
        templateUrl: 'teleport/_teleport.html',
        controller: 'CoverImageCtrl'
      });
   $urlRouterProvider.otherwise('teleport');
}]);
</code></pre>

<p>teleport.html</p>

<pre><code>&lt;script type="text/ng-template" id="/teleport.html"&gt;

  &lt;div id="teleport-gallery" class="container-fluid bg-3 text-center"&gt;
    &lt;div class="row"&gt;
      &lt;div class="teleport-images" ng-repeat="myCoverImage in myCoverImages" ng-mouseover="style={'height':'410px','width':'410px'}" ng-mouseleave="style={'height':'400px','width':'400px'}"&gt;
        &lt;a href="#/galleries/{{$index}}"&gt;&lt;img class ="teleport-images" ng-style="style"  ng-hide="changeImage" ng-src="{{getCoverImagePath(myCoverImage.image)}}" alt="super awesome picture" /&gt;&lt;/a&gt;
        &lt;h2 class="teleport-titles"&gt;{{myCoverImage.title}}&lt;/h2&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
&lt;/script&gt;
</code></pre>

<p>coverImageCtrl.js</p>

<pre><code>var app = angular.module('galleryApp');

app.controller('CoverImageCtrl', [
  '$scope',
  function($scope){
    $scope.myCoverImages = [
      {image: "san_francisco/Corgi.png", title: "San Diego"},
      {image: "baja/secret-hideaway.png", title: "Chicago"},
      {image: "new_orleans/llama.jpg", title: "New Orleans"},
      {image: "chicago/mex.jpg", title: "San Francisco"},
      {image: "los_angeles/surfing-1400X600.jpg", title: "Los Angeles"},
      {image: "san_diego/rainbow_shave_ice_800.jpg", title: "Baja Nor"}
    ];

    $scope.getCoverImagePath = function(coverImageName) {
      return  "../../images/galleries/" + coverImageName;
    };

}]);
</code></pre>

<p>application.js</p>

<pre><code>// = require angular
// = require angular-rails-templates
// = require angular-ui-router
//= require_tree .
</code></pre>