JSFiddle - React, Tailwind, and code Playground

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.5.0/ui-bootstrap-tpls.min.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css">
<div ng-app="challenge">
    <h3>how can I refactor it out using ng-repeat?</h3>
    <table>
        <thead></thead>
        <tbody ng-controller="ctrl">
            <tr>
                <td dir>click</td>
                <td>{{collection[0]}}</td>
            </tr>
            <tr style="display:none;">
                <td>--></td>
                <td>comment {{collection[0]}}
                    <a tooltip="a tooltip comment {{collection[0]}}">
                        <i class="icon-ok-sign"></i>
                    </a>
                </td>                
            </tr>
            <tr>
                <td dir>click</td>
                <td>{{collection[1]}}</td>
            </tr>
            <tr style="display:none;">
                <td>--></td>
                <td>comment {{collection[1]}}
                    <a tooltip="a tooltip comment {{collection[1]}}">
                        <i class="icon-ok-sign"></i>
                    </a>
                </td>                
            </tr>
        </tbody>
    </table>    
</div>

JavaScript

angular
.module('challenge', ['ui.bootstrap'])
.controller('ctrl', function($scope) {
    $scope.collection = ['one','two']; //GOAL: apply this to ng-repeat
})
.directive('dir', function() {
    return {
        link: function(scope, elem, attrs) {
            $(elem).on('click', function() {
               $(this)
               .parent('tr')
               .next('tr')
               .toggle();
            })   
        }
    }
})