Angular: How to dynamically create an htmlelement bound to a js object?

Question

Angular

There is a set of lists of the form:

<div>
<ul>
    <li>...</li>
    <li>...</li>
</ul>
....
<ul>
    <li>...</li>
    <li>...</li>
</ul>
</div>

A new li element can be added to any of the ul lists.
There is a js directory with data of the form:

product.byId = {23: {name: 'product1'}, 45: {name: 'product2'} }.

I want to add li using angular so that it is tied to one of the product.byId. Is it possible?

Answer 1

here is what I wanted to do:

var el = angular.element(ulHtmlEl);
    $scope.$apply(function() {
      var scope = $scope.$new();    // создаём дочерний scope
      scope.prod = $scope.product.byId[productData.id];
      el.append($compile(
        '<li>{{prod.fullDescr}}</li>'
      )(scope));
    });