Angular: Empty Fiddle

http://angularjs.org/

HTML

<script src="http://code.angularjs.org/angular-1.0.1.js"></script>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/css/bootstrap-combined.min.css">
<script src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/js/bootstrap.min.js"></script>
<div ng-controller="UserCtrl">
    <h3>Click row to revel last name!</h3>
    <table class="table table-condensed">
        <thead>
            <td>First Name</td>
        </thead>
        
        <tbody ng-repeat="user in users" on-finish-render>
            <tr data-toggle="collapse" data-target="#{{user.id}}">
                <td>{{user.firstName}}</td>
            </tr>
            <tr>
                <td class="hiddenRow">
                    <div id="{{user.id}}" class="collapse">
                        <h4>{{user.lastName}}</h4>
                    </div>
                </td>
            </tr>
        </tbody>
    </table>
</div>

CSS

.hiddenRow {
    padding: 0 !important;
}

JavaScript

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

myApp.directive('onFinishRender', function ($timeout) {
    return {
        restrict: 'A',
        link: function (scope, element, attr) {
            if (scope.$last === true) {
                $timeout(function () {
                    scope.$emit('ngRepeatFinished');
                });
            }
        }
    }
});

var users = [
    {
        id:0,
        firstName:'Bob',
        lastName:'Smith'
    },
    {
        id:1,
        firstName:'John',
        lastName:'Appleseed'
    },
     {
        id:2,
        firstName:'Jim',
        lastName:'Doe'
    }
];

function UserCtrl($scope) {
    //set users from global var
    $scope.users = users;
    
    $scope.$on('ngRepeatFinished', function (ngRepeatFinishedEvent) {
    	$('.collapse').on('show.bs.collapse', function () {
    	    $('.collapse.in').collapse('hide');
    	});
	});
}