Appending a list iterating in AngularJS to the HTML DOM

So I have an AngularJS function that when called should add a list element to a div in the DOM, and the list should be ng-repeat so that it could iterate on objects from a list.

These objects in the list contain a few properties which I want to print out.

Part of the AngularJS program

var el = angular.element(document.getElementById('categories'));
el.append('<ul id="' + categoryItemStr + '"><li ng-repeat="item in categories[currentCategory]"><h4 class="h4"></h4><br><span style="font-size:11px;">.00 $</span></li></ul>');

But when I run it it’s not ng-repeatable and it looks like the javascript hasn’t rendered. It’s important to note that I have the same HTML already in the document when the page loads and it works fine when it doesn’t come out of an angular function but is written inside the HTML document.

How do I fix this?

Source: AngularJS

from Angular Questions https://angularquestions.com/2017/09/30/appending-a-list-iterating-in-angularjs-to-the-html-dom/
via @lzomedia #developer #freelance #web #lzomedia.com