I have a list that I am looping through using ng-repeat:
<div class="row msf-row" ng-repeat="record in recordlist people-popover>
<div class="col-md-1 msf-centered" ng-show="editItem == false" ng-hide="editItem">
<button class="btn btn-primary form-control msf-paxlist" rel="popover" data-content="<li ng-repeat='passanger in record.pax'>{{passanger.name}}</li>" data-original-title="Passenger List">
{{record.pax.length}} <i class="fa fa-user"></i>
</button>
</div>
</div>
To enable the popover, I have created a directive:
.directive('peoplePopover', function() {
return function(scope, element, attrs) {
element.find("button[rel=popover]").popover({ placement: 'bottom', html: 'true'});
};
})
The issue lies in the
<li ng-repeat="passanger in record.pax">{{passanger.name}}</li>If I use
<li ng-repeat="record.pax">{{pax}}</li>Here is an example of how the 'record' array looks:
record in recordlist {
date: "02/12/2014",
time: "00.02.01",
car: "369",
pax: [
{
name: "Ben",
chosen: true
},
{
name: "Eric",
chosen: true
}
]
}
Any suggestions on how to properly display the objects within the 'record.pax' array?