angularjs - Angular directive (ng-repeat) within double quotes

Question

I am using metro ui and am trying to use ng-repeat within it to build html within a popup.

My template looks like this. Any thoughts would help. I have verified the data is there, but ng-repeat just doesn't work within double quotes. I've tried using single quotes, but that doesn't work.

Here's my template.

<div class="container">
<div class="title-group six">
 <a ng-repeat="product in products"
 data-hint="{{product.name}}|<div><ul><li ng-repeat='color in product.colors'>{{color.name}}</li> </ul></div>" href="#/product/{{product.id}}" class="tile  bg-violet" data-click="transform"  >

        <div class="tile-content icon">
            <img src="{{product.pic}}">
        </div>
        <div class="brand">
            <div class="label">{{product.name}} </div>
        </div>

    </a>

</div>

Answer 1

As a start, your HTML is malformed, you need a closing DIV tag on the end.

Also, in your ng-repeat, your variable name should be different to the array. I'd suggest something like: ng-repeat="p in products" or ng-repeat="product in products"

Hopefully this helps.