How do I dynamically build an ng-include src?

All we need is an easy explanation of the problem, so here it is.

I have the following code:

<div ng-repeat="module in modules" id="{{module.Id}}">
    <ng-include ng-init="bootstrapModule(module.Id)" src=""></ng-include>

I want to be able to build a string in src like so:


But I keep hitting roadblocks. I’ve tried to use a call back function to build it,

$scope.constructTemplateUrl = function(id) {
    return '/modules/' + id + '/' + id + '.tpl.html';

But this gets called over & over & over and it doesn’t seem to like that. I’ve also tried to construct it like so:


But that isn’t working either. Rather than spend hours beating around the bush, I wondered if anyone else has come up against something like this and has any ideas?

Also, when I grab the modules from $resource, I am returning them asynchronously with $q, so I can’t seem to go through and add it into the modules before in the controller as $scope.modules just equals a then function at that point.

Any ideas?

How to solve :

I know you bored from this bug, So we are here to help you! Take a deep breath and look at the explanation of your problem. We have many solutions to this problem, But we recommend you to use the first method because it is tested & true method that will 100% work for you.

Method 1

ngInclude | src directive requires an angular expression, which means you should probably write

ng-src="'/modules/' + module.Id + '/tpl.html'"


ngInclude|src string angular expression evaluating to URL. If the
source is a string constant, make sure you wrap it in quotes, e.g.

It might be better if you construct the url in model instead of inline HTML

<div ng-repeat="module in modules" id="{{module.Id}}">
    <ng-include src="module.url"></ng-include>

Note: Use and implement method 1 because this method fully tested our system.
Thank you 🙂

All methods was sourced from or, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0

Leave a Reply