Binding doesn't work in nested elements inside ng-repeat

Question

I have this code:

<div class="list-group">
<a href="#" class="list-group-item" ng-repeat="user in users">
    <h4 class="list-group-item-heading">{{user.FirstName}} {{user.FirstName}}</h4>
    <p class="list-group-item-text">
        <a href="#">{{user.Phone}}</a>
    </p>
</a>

If I use {{user.Phone}} not inside the <a> it works, otherwise it displays nothing and I don't get any error or anything.

Answer 1

You cannot put an <a> tag within an <a> tag. This is against HTML definition.

Try changing your outer <a> tag to a <div> and remove the href attribute.

Answer 2

you have an html error there: a link inside a link. Notice that the user.Phone link is inside the already existing link that you use ng-repeat on:

I would change code to this:

<div href="#" class="list-group-item" ng-repeat="user in users">
    <h4 class="list-group-item-heading">{{user.FirstName}} {{user.FirstName}}</h4>
    <p class="list-group-item-text"><a href="#">{{user.Phone}}</a></p>
</div>