AngularJS Template not properly loading - angularjs

Question

Had a bit of trouble with Angular earlier, but I was able to resolve that problem. Of course, being a newbie, we've hit more problems!
Did some searching around for this error, but applying the fixes that other people have tried has not proven effective for me.
I am currently trying to load a partial onto a show page in Rails using AngularJS.
EDIT: I apologize- I forgot to mention that I intend to load a partial from a file in the same directory as all these files. Current directory tree is as follows:
Directory containing relevant js files and the timer partial
I have the following code built out:
Show.html.erb
<timer-info ng-controller = "CountdownController">
</timer-info>
app.js
'use strict';
var myApp = angular.module("summoners-universe", ['ngRoute'])
directives.js
'use strict';
myApp.directive("timerInfo", function(){
return {
restrict: "E",
templateUrl: 'app/assets/javascripts/timer.html'
};
});
controllers.js
'use strict';
myApp.controller('CountdownController',
["$scope", "$http", "$routeParams",
function($scope, $http, $routeParams){
console.log($routeParams);
}]);
Eventually this controller will display a countdown timer, but for now, I just wanted to make sure I could get my routeParams and all that.
Sadly, I'm hit with the following error upon page load:
angular.self-208d6d1….js?body=1:11757 GET http://localhost:3000/games/app/assets/javascripts/timer.html 404 (Not Found)(anonymous function) # angular.self-208d6d1….js?body=1:11757sendReq # angular.self-208d6d1….js?body=1:11518serverRequest # angular.self-208d6d1….js?body=1:11228processQueue # angular.self-208d6d1….js?body=1:15962(anonymous function) # angular.self-208d6d1….js?body=1:15978Scope.$eval # angular.self-208d6d1….js?body=1:17230Scope.$digest # angular.self-208d6d1….js?body=1:17046Scope.$apply # angular.self-208d6d1….js?body=1:17338bootstrapApply # angular.self-208d6d1….js?body=1:1750invoke # angular.self-208d6d1….js?body=1:4666doBootstrap # angular.self-208d6d1….js?body=1:1748bootstrap # angular.self-208d6d1….js?body=1:1768angularInit # angular.self-208d6d1….js?body=1:1653(anonymous function) # angular.self-208d6d1….js?body=1:30864fire # jquery.self-4e23968….js?body=1:3188self.fireWith # jquery.self-4e23968….js?body=1:3318jQuery.extend.ready # jquery.self-4e23968….js?body=1:3537completed # jquery.self-4e23968….js?body=1:3553
angular.self-208d6d1….js?body=1:13551 Error: [$compile:tpload] Failed to load template: app/assets/javascripts/timer.html (HTTP status: 404 Not Found)
http://errors.angularjs.org/1.5.5/$compile/tpload?p0=app%2Fassets%2Fjavascripts%2Ftimer.html&p1=404&p2=Not%20Found
at angular.self-208d6d1….js?body=1:69
at handleError (angular.self-208d6d1….js?body=1:18979)
at processQueue (angular.self-208d6d1….js?body=1:15962)
at angular.self-208d6d1….js?body=1:15978
at Scope.$eval (angular.self-208d6d1….js?body=1:17230)
at Scope.$digest (angular.self-208d6d1….js?body=1:17046)
at Scope.$apply (angular.self-208d6d1….js?body=1:17338)
at done (angular.self-208d6d1….js?body=1:11573)
at completeRequest (angular.self-208d6d1….js?body=1:11779)
at XMLHttpRequest.requestLoaded (angular.self-208d6d1….js?body=1:11712)(anonymous function) # angular.self-208d6d1….js?body=1:13551(anonymous function) # angular.self-208d6d1….js?body=1:10226processQueue # angular.self-208d6d1….js?body=1:15970(anonymous function) # angular.self-208d6d1….js?body=1:15978Scope.$eval # angular.self-208d6d1….js?body=1:17230Scope.$digest # angular.self-208d6d1….js?body=1:17046Scope.$apply # angular.self-208d6d1….js?body=1:17338done # angular.self-208d6d1….js?body=1:11573completeRequest # angular.self-208d6d1….js?body=1:11779requestLoaded # angular.self-208d6d1….js?body=1:11712XMLHttpRequest.send (async)(anonymous function) # angular.self-208d6d1….js?body=1:11757sendReq # angular.self-208d6d1….js?body=1:11518serverRequest # angular.self-208d6d1….js?body=1:11228processQueue # angular.self-208d6d1….js?body=1:15962(anonymous function) # angular.self-208d6d1….js?body=1:15978Scope.$eval # angular.self-208d6d1….js?body=1:17230Scope.$digest # angular.self-208d6d1….js?body=1:17046Scope.$apply # angular.self-208d6d1….js?body=1:17338bootstrapApply # angular.self-208d6d1….js?body=1:1750invoke # angular.self-208d6d1….js?body=1:4666doBootstrap # angular.self-208d6d1….js?body=1:1748bootstrap # angular.self-208d6d1….js?body=1:1768angularInit # angular.self-208d6d1….js?body=1:1653(anonymous function) # angular.self-208d6d1….js?body=1:30864fire # jquery.self-4e23968….js?body=1:3188self.fireWith # jquery.self-4e23968….js?body=1:3318jQuery.extend.ready # jquery.self-4e23968….js?body=1:3537completed # jquery.self-4e23968….js?body=1:3553
I don't know why a get request is being made to that URL. Any thoughts? Thank you!

Answer 1

The templateUrl of the timerInfo should be absolute, like this:
templateUrl: '/app/assets/javascripts/timer.html'
This way you're referencing from the root directory down to the desired file.

Answer 2

Ah, I was able to figure it out. Apparently, the Angular-Rails gem looks for templates to load in an app/templates directory. I just had to make that directory and put the template there.