ng-repeat with ng-include not working

Question

I am trying to use an ng-repeat that includes an ng-include. The problem is that the first element in the ng-repeat is just the ng-include

Answer 1

I ran into the same problem, and finally figured out that the first element has not been fetched and compiled in time for the first ng-repeat iteration. Using $templateCache will fix the problem.

---

You can cache your template in a script tag:

---

Or in your app's run function:

angular.module("app").run(function($http, $templateCache) {
    $http.get("/views/template.html", { cache: $templateCache });
});

---

You can also use $templateCache inside your directive, although it's a bit harder to setup. If your templates are dynamic, I would recommend creating a template cache service. This SO question has some good examples of template caching inside a directive and a service:

Using $http and $templateCache from within a directive doesn't return results