AngularJS ng-include Gotcha

In AngularJS, ng-include processes the contents of "src" attribute as a Javascript expression, not as a file path.

What this means is that you can dynamically determine what to include by doing something like this:

<div ng-include src=”getAppropriateContent()”></div>

where the "getAppropriateContent()" Javascript function that you'll implement returns the path of the appropriate content to show for the situation.

However, when you want to hardcode the path to a HTML file, you'll have to remember it's a Javascript expression. You'll have to enclose it in quotes (single quotes in this case) or it won't work.

<div ng-include src=”’content.html’”></div>