Angular: Testing controller with directive

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">tableRowIdExpanded: <b>{{tableRowIdExpanded}}</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>
                                <th>Employees</th>
               ...

CSS

.clickableRow {
    cursor: pointer;
}

p, textarea {
    font-variant: small-caps !important;
    text-rendering: auto;
}

JavaScript

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


myApp.directive('expandRow', function() {
    return {
        restrict: 'EA',
        template: '<div><tr id="storedata.store.storeId" data-ng-repeat="storedata in storeDataModel.storedata" class="clickableRow" title="Click me to see day summaries for this machine." data-ng-click="selectTableRow($index, storedata.store.storeId)"><td>{{storedata.store.storeId}}</td>  <td>{{storedata.store.storeName}}</td><td>{{storedata.store.storeAddress}}</td><td{{storedata.store.storeCity}}</td><td>{{storedata.data.costTotal}}</td><td>{{storedata.data.salesTotal}}</td><td>{{storedata.data.revenueTotal}}</td><td>{{storedata.data.averageEmployees}}</td><td>{{storedata.data.averageEmployeesHours}}</td></tr></div>',
        replace: true,
        transclude: true,
        compile: function(elem, attrs, transcludeFn) {
            transcludeFn(elem, function(clone) {
                var store = elem.find('div.store');
                var details = elem.find('div.details');
                var transcludedTd = clone.filter(':td'); 
                angular.forEach(transcludedTd, function(e) {
                    if (angular.element(e).hasClass('primary')) {
                        primaryBlock.append(e);
                    } else if (angular.element(e).hasClass('secondary')) {
                        secondaryBlock.append(e);
                    }
                });
            });
        }
    };
});





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

    $scope.tableRowExpanded = false;
    $scope.tableRowIndexExpanded = "";
    $scope.tableRowIdExpanded = "";

    $scope.selectTableRow = function (index, storeId) {
        if ($scope.tableRowExpanded === false && $scope.tableRowIndexExpanded === "" && $scope.tableRowIdExpanded === "") {

            $scope.tableRowExpanded = true;
            $scope.tableRowIndexExpanded = index;
            $scope.tableRowIdExpanded = storeId;
        } else if...