Untitled

<!DOCTYPE html>
<html ng-app="BreadCrumb">

  <head>
    <script data-require="angular.js@1.2.1" data-semver="1.2.1" src="http://code.angularjs.org/1.2.1/angular.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

  <body ng-controller="mainController">
  <h1>Breadcrumbs = {{breadcrumbs}}</h1>
    <ul>
      <li ng-repeat="item in json">
        <a href="#" ng-click="showCrumbs(item)" ng-bind="item.roleName"></a>
        <ul>
          <li ng-repeat="child in item.children">
            <a href="#" ng-click="showCrumbs(item, child)" ng-bind="child.roleName"></a>
            <ul>
              <li ng-repeat="type in child.children">
                <a href="#" ng-click="showCrumbs(item, child, type)" ng-bind="type.roleName"></a>
              </li>
            </ul>
          </li>
        </ul>
      </li>
    </ul>
  </body>

</html>

// Code goes here

angular.module('BreadCrumb', [])
  .controller('mainController', function($scope) {
    
    //Store current BreadCrumbs
    $scope.breadcrumbs = 'Nothing Yet :)';
    
    //What generates the breadcrumbs
    //will use the magic arguments variable to display crumbs
    $scope.showCrumbs = function() {
      $scope.breadcrumbs = '';
      for (var i = 0; i < arguments.length; i++) {
        if (i)
          $scope.breadcrumbs = $scope.breadcrumbs.concat(" -> ");
        $scope.breadcrumbs = $scope.breadcrumbs.concat(arguments[i].roleName);
      }
    }
    
    //Store the JSON supplied
    $scope.json = [{
      "roleName": "Humans",
      "roleId": "role2",
      "children": [{
        "roleName": "",
        "roleId": "role11",
        "children": []
      }]
    }, {
      "roleName": "Trees",
      "roleId": "role2",
      "children": [{
        "roleName": "",
        "roleId": "role11",
        "children": []
      }]
    }, {
      "roleName": "Animals",
      "roleId": "role2",
      "children": [{
          "roleName": "Cats",
          "roleId": "role11",
          "children": []
        }, {
          "roleName": "Dogs",
          "roleId": "role11",
          "children": [{
            "roleName": "Bulldog",
            "roleId": "role11",
            "children": [{
              "roleName": "",
              "roleId": "role11",
              "children": []
            }]
          }, {
            "roleName": "Cocker",
            "roleId": "role11",
            "children": [{
              "roleName": "",
              "roleId": "role11",
              "children": []
            }]
          }, ]
        },

      ]
    }, ];
  });

/* Styles go here */