JSFiddle - React, Tailwind, and code Playground

by Bretto

HTML

<script src="http://code.angularjs.org/1.0.1/angular-1.0.1.js"></script>
<script src="http://twitter.github.com/bootstrap/assets/js/bootstrap.js"></script>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.0.4/css/bootstrap.css">
<div ng-app="myApp">
    <div ng-controller="MyCtrl">
        <p>This Works Fine:</p>
        <computer data="computers[0]"></computer>

        <ul>
            <li ng-repeat="computer in computers">
                <a popover rel="popover" 
                   data-placement="right" 
                   data-original-title="Computer #{{computer.id}}" 
                   data-trigger="hover" 
                   computer='computer'
                   class="btn btn-mini">{{computer.id}}
                </a>
            </li>
        </ul>
    </div>
</div>

JavaScript

var myApp = angular.module("myApp", []);

function MyCtrl($scope) {
    $scope.computers = 
    [
        {id: "01", make: "Make 1", model: "Model 1", cost: "200"},
        {id: "02", make: "Make 2", model: "Model 2", cost: "300"},
        {id: "03", make: "Make 3", model: "Model 3", cost: "400"}
    ];
}

myApp.directive('popover', function($compile, $compile) {
    return {
        restrict: 'A',
        scope: {
            computer: '='
        },
        link: function(scope, element, attributes)
        {
            var ele = angular.element("<computer data='computer'></computer>");            
            var computer = $compile(ele)(scope);            
            $(element).popover({placement: "right", content:computer });
        }
    }
});
    
myApp.directive('computer' , function() {
    return {
        restrict: 'E',
        scope: {data: "="},
        template: '<p><strong>Make:</strong> {{data.make}} - <strong>Model</strong>: {{data.model}} | <strong>Cost</strong>: {{data.cost}}</p>'
    }
});