Angular: Multiple Tables with level2 ng-collapse

Purpose: Use ng-repeat and with controller and directive be able to click any row within the table, get the clicked row highlighted and then expand (beneath the clicked row) and insert another table (which should not be in the DOM all the time. TEST: Testing without second level table. Just with a separate div.

HTML

<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.5/angular.js"></script>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css">
<script src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
<script src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.4.0.js"></script>
<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css">
<div ng-app="myApp">
    <div ng-controller="myController" class="row-fluid">
        <!-- START $scope.[model] updates -->
        <div class="span12 well well-small">
            <div class="span5">
                <p class="nav-header">collapse/expand tableRow</p>
                <p class="small-caps">tableRowExpanded: <b>{{tableRowExpanded}}</b>

                </p>
                <p class="small-caps">tableRowIndexCurrExpanded: <b>{{tableRowIndexCurrExpanded}}</b>

                </p>
                <p class="small-caps">storeIdExpanded: <b>{{storeIdExpanded}}</b>

                </p>
            </div>
            <div class="span7">
                <p class="nav-header">dayDataCollapse</p>{{dayDataCollapse}}</div>
        </div>
        <!-- END $scope.[model] updates -->
        <!-- START TABLE -->
        <div class="span12">
            <table class="table table-hover table-condensed table-striped">
                <thead>
                    <tr>
                        <th>Store ID</th>
                        <th>Name</th>
                        <th>Address</th>
                        <th>City</th>
                        <th>Cost</th>
                        <th>Sales</th>
                        <th>Revenue</th>
                        <th>Employees</th>
                        <th>Employees H-sum</th>
                    </tr>
                </thead>
                <tbody data-ng-repeat="storedata in storeDataModel.storedata">
                    <tr...

CSS

body {
    width: 98%;
}
.clickableRow {
    cursor: pointer;
}
p, textarea {
    font-variant: small-caps !important;
    text-rendering: auto;
}
td, th {
    font-size: 8pt;
}
table {
    padding: 0px;
    : 0px;
}

JavaScript

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

myApp.controller('myController', function ($scope) {

    $scope.tableRowExpanded = false;
    $scope.tableRowIndexCurrExpanded = "";
    $scope.tableRowIndexPrevExpanded = "";
    $scope.storeIdExpanded = "";
    $scope.dayDataCollapse = [true, true, true, true, true, true];

    $scope.dayDataCollapseFn = function () {
        for (var i = 0; storeDataModel.storedata.length - 1; i += 1) {
            $scope.dayDataCollapse.append('true');
        }
    };



    $scope.selectTableRow = function (index, storeId) {
        if ($scope.dayDataCollapse === 'undefined') {
            $scope.dayDataCollapse = $scope.dayDataCollapseFn();
        } else {

            if ($scope.tableRowExpanded === false && $scope.tableRowIndexCurrExpanded === "" && $scope.storeIdExpanded === "") {
                $scope.tableRowIndexPrevExpanded = "";
                $scope.tableRowExpanded = true;
                $scope.tableRowIndexCurrExpanded = index;
                $scope.storeIdExpanded = storeId;
                $scope.dayDataCollapse[index] = false;
            } else if ($scope.tableRowExpanded === true) {
                if ($scope.tableRowIndexCurrExpanded === index && $scope.storeIdExpanded === storeId) {
                    $scope.tableRowExpanded = false;
                    $scope.tableRowIndexCurrExpanded = "";
                    $scope.storeIdExpanded = "";
                    $scope.dayDataCollapse[index] = true;
                } else {
                    $scope.tableRowIndexPrevExpanded = $scope.tableRowIndexCurrExpanded;
                    $scope.tableRowIndexCurrExpanded = index;
                    $scope.storeIdExpanded = storeId;
                    $scope.dayDataCollapse[$scope.tableRowIndexPrevExpanded] = true;
                    $scope.dayDataCollapse[$scope.tableRowIndexCurrExpanded] = false;
                }
            }
        }
    };

    $scope.storeDataModel = {
        "metadata": {
   ...