Angular: Empty Fiddle

http://angularjs.org/

by jlaw

HTML

<script src="http://code.angularjs.org/angular-1.0.1.js"></script>
<div ng-controller="MyCtrl"><architecture trigger="ThisIsMyTrigger"></architecture></div>

CSS

* {
    box-sizing: border-box;
}
.archBody {
    border:1px solid black;
    height: 500px;
    min-width:500px;
}
.archList {
    float:left;
    border:1px solid red;
    height: 100%;
    width: 200px;
    overflow:auto;
}
.rightSide {
    float:right;
    border:1px solid blue;
    min-height:50%;
    width: calc(100% - 200px);
    padding:5px
}
.rightSide h2 {
    margin-top:5px;
}

JavaScript

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

myApp.directive('architecture', function () {
  return {
      template: '<div class="archBody"> <div class="archList"> <ul> <li>1 <ul> <li>1.1 <ul> <li>1.1.1 <ul> <li>1.1.1.1</li> </ul> </li> </ul> </li> <li>1.2</li> <li>1.3</li> <li>1.4</li> <li>1.5</li> <li>1.6</li> </ul> </li> <li>2 <ul> <li>2.1 <ul> <li>2.1.1 <ul> <li>2.1.1.1</li> </ul> </li> </ul> </li> <li>2.2</li> <li>2.3</li> <li>2.4</li> <li>2.5</li> <li>2.6</li> </ul> </li> <li>3 <ul> <li>3.1 <ul> <li>3.1.1 <ul> <li>3.1.1.1</li> </ul> </li> </ul> </li> <li>3.2</li> <li>3.3</li> <li>3.4</li> <li>3.5</li> <li>3.6</li> </ul> </li> </ul><ul> <li>1 <ul> <li>1.1 <ul> <li>1.1.1 <ul> <li>1.1.1.1</li> </ul> </li> </ul> </li> <li>1.2</li> <li>1.3</li> <li>1.4</li> <li>1.5</li> <li>1.6</li> </ul> </li> <li>2 <ul> <li>2.1 <ul> <li>2.1.1 <ul> <li>2.1.1.1</li> </ul> </li> </ul> </li> <li>2.2</li> <li>2.3</li> <li>2.4</li> <li>2.5</li> <li>2.6</li> </ul> </li> <li>3 <ul> <li>3.1 <ul> <li>3.1.1 <ul> <li>3.1.1.1</li> </ul> </li> </ul> </li> <li>3.2</li> <li>3.3</li> <li>3.4</li> <li>3.5</li> <li>3.6</li> </ul> </li> </ul> </div> <div class="rightSide"> <h2>Description</h2>  <div>description content</div> </div> <div class="rightSide"> <h2>Results</h2>  <div>results content</div> </div> </div>',
    restrict: 'E',
    scope: {
      trigger: '@trigger'
    },
    link: function postLink(scope, element, attrs) { /*jshint unused:false*/
      scope.loading = false;
    }
  };
});

//myApp.factory('myService', function() {});

function MyCtrl($scope) {
    $scope.data = {
  "attributeCode": "0",
  "attributeType": "DI2E-SVCV4-A",
  "children": [
    {
      "attributeCode": "1",
      "attributeType": "DI2E-SVCV4-A",
      "children": [
        {
          "attributeCode": "1.1",
          "attributeType": "DI2E-SVCV4-A",
          "children": [
            {
              "attributeCode": "1.1.1",
              "attributeType": "DI2E-SVCV4-A",
              "children": [
          ...