ng-repeat from within innerHTML function?

Question

I have 3 columns. The first lists a list of subjects from an array. Within that array, each subject has it\'s particular courses listed within, and within that, the rest of the

Answer 1

A directive is a better answer for you. DOM manipulation should be done in directives, not controllers.

That said, it is possible using Angular's $compile which makes Angular aware of new HTML.

Just as a proof of concept- here's that function (and a working fiddle):

$scope.showDetail = function (todo) {
    var html= '
{{course.coursesub}}
';
    var innerHTML =$compile(html)($scope) 
    var currente = angular.element(document.getElementById("courselistings"));

    currente.replaceWith(innerHTML);
}

In order for this to work we also need to pass in the index of the course you want to show -- ng-click="showDetail($index)". This is because the $compile will compile this against the controller scope, not the one inside the ngRepeat.

As you can see it takes jumping through a number of hoops to make this work- which is part of why a directive is better.