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.

by Pixic

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">tableRowIndexExpanded: <b>{{tableRowIndexExpanded}}</b>
                </p>
                <p class="small-caps">storeIdExpanded: <b>{{storeIdExpanded}}</b>
                </p>
            </div>
            <div class="span7">
                <p class="nav-header">Transcluded Information</p>
                <textarea class="input-large small-caps">{{transcludedInfo}}</textarea>
            </div>
        </div>
        <!-- END $scope.[model] updates -->
        <!-- START TABLE -->
        <div class="span12">
            <div collapse="tableCollapsed">
                <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>
                 ...

CSS

.clickableRow {
    cursor: pointer;
}
p, textarea {
    font-variant: small-caps !important;
    text-rendering: auto;
}
td, th {
    font-size: 8pt;
}

.tdNumber {
    text-align: right;
}

storeDiv {
    color: navy;
}
store {
    color: navy;
}
detailsDiv {
    color: red;
}

JavaScript

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

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

    $scope.tableRowExpanded = false;
    $scope.tableRowIndexCurrExpanded = "";
    $scope.tableRowIndexPrevExpanded = "";
    $scope.storeIdExpanded = "";
    $scope.dayDataCollapse = []
    
    $scope.dayDataCollapseInitFn = function(){
        for ( var i=0 ; storeDataModel.storesInRepresentation - 1 ; i += 1){
            dayDataCollapse.append(true);
        }
    }
    
    
    $scope.selectTableRow = function (index, storeId) {
        
        if ($scope.tableRowExpanded === false && $scope.tableRowIndexExpanded === "" && $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[index] = false;
            }
        }
    };

    $scope.storeDataModel = {
        "metadata": {
            "storesInTotal": "25",
                "storesInRepresentation": "6"
        },
            "storedata": [{
            "store": {
                "storeId": "1000",
                    "storeName": "Store 1",
                    "storePhone": "+46 31 1234567",
    ...