Couldn't load template using templateUrl in Angularjs

The problem is that you are running your example off the file system (using the file:// protocol) and many browsers (Chrome, Opera) restricts XHR calls when using the file:// protocol. AngularJS templates are downloaded via XHR and this, combined with the usage of the file:// protocol results in the error you are getting.

You've got several options when it comes to resolving this situation:

• Run your examples using a web server (there are many easy solutions like https://code.google.com/p/mongoose/ or a few lines node.js script)
• Embed templates in your index.html file using the <script> directive: http://docs.angularjs.org/api/ng.directive:script so your templates are downloaded with the main HTML file and it is no longer necessary to load them via XHR
• Change your browser settings to allow XHR calls over the file:// protocol. For example this can be done in Chrome like so: Allow Google Chrome to use XMLHttpRequest to load a URL from a local file

If you have Node and NPM installed then run: npm install http-server -g

Then navigate to the folder containing your app and run: http-server

I found my answer in this SO post: Quick Node Server

You can download Node here (NPM comes with Node): Node

Hope this helps!

Chrome does not allow ajax requests on the file: protocol.

Take a look at: Google Chrome --allow-file-access-from-files disabled for Chrome Beta 8 for a workaround, or you could run a web server on your computer.