JSFiddle - React, Tailwind, and code Playground

by grzesir

HTML

<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js#sthash.ED14uY2y.dpuf"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<div ng-app="AngularApp">
    <div class="container" ng-controller="MainController">
        <div ng-repeat="phone in phones">{{phone.name}} <a href="javascript: void(0);" class='repeatpopover' data-popover="true" data-html=true data-content="<div ng-repeat='friend in phone.friends'>{{friend.name}}</div>">hover here</a>

        </div>
    </div>
</div>

JavaScript

var angularApp = angular.module('AngularApp', []);

angularApp.controller('MainController', function ($scope) {
    $scope.phones = [{
        'name': 'Nexus S',
            'snippet': 'Fast just got faster with Nexus S.',
            'friends': [{
            'name': 'John'
        }, {
            'name': 'Mike'
        }]
    }, {
        'name': 'Motorola XOOM™ with Wi-Fi',
            'snippet': 'The Next, Next Generation tablet.',
            'friends': [{
            'name': 'John 2'
        }, {
            'name': 'Mike 2'
        }]
    }, {
        'name': 'MOTOROLA XOOM™',
            'snippet': 'The Next, Next Generation tablet.',
            'friends': [{
            'name': 'Chris'
        }, {
            'name': 'Noah'
        }]
    }];
});

$(function () {
    $(".repeatpopover").popover({
        trigger: "hover"
    });
});