I am facing an issue with compiling and attaching multiple directives to the DOM. Here is an example of what I am trying to do:
mod.controller("ctrl, ["$scope", "$compile", function($scope, $compile) {
$scope.tools = [
{
title: "foo",
directive: $compile("<foo-bar></foo-bar>")($scope)
},
{
title: "qux",
directive: $compile("<qux-bar></qux-bar>")($scope)
}
...
];
When I try to display these directives in HTML using ng-repeat, it doesn't work as expected. I believe this could be due to calling $compile at a wrong stage. Is there a more appropriate way to achieve this functionality?
Interestingly, when I manually compile and append a directive to the body tag, it works fine:
$('body').append($compile('<foo-bar></foo-bar>')($scope));