Angular 1.4: Empty Fiddle

http://angularjs.org/ Ready to start playing with angular in your browser

by praveen_kr

HTML

<div ng-controller="MyCtrl">
    Hello, {{name}}!
   
    <div ng-repeat='f in jobs'>
    {{f.FamilyDescription}}
    <diV ng-repeat='sf in f.SubFamilies' style='margin-left:10px;' >
     
      <span >
      {{s.SubFamilyDescription}}
      </span>
     <table  class='e-table'  >
    <tr ng-repeat='e in sf.Positions' ng-mouseenter="setHighlighting(e.PositionId,e.PositionId,true)" ng-mouseleave="setHighlighting(e.PositionId,e.PositionId,false)" >
        <td ng-class="{'highlight':e.hightlight}"> <p>
        {{e.Title}}
        </p></td>
        <td>
            <table class='m-table'>
                <tr ng-repeat='m in e.ChildPosition'>
                    <td ng-mouseenter="setHighlighting(m.PositionId,e.PositionId,true)" ng-mouseleave="setHighlighting(m.PositionId,e.PositionId,false)" ng-class="{'highlight':m.hightlight}" ><p>{{m.Title}}</p> </td>
                    <td>
                        <table class='p-table' >
                            <tr ng-repeat='p in m.ChildPosition' ng-mouseenter="setHighlighting(p.PositionId,e.PositionId,true)" ng-mouseleave="setHighlighting(p.PositionId,e.PositionId,false)">
                                <td ng-class="{'highlight':p.hightlight}"> <p>{{::p.Title}}</p> </td>
                                <td>
                                    <table class='s-table'>
                                        <tr ng-repeat='s in p.ChildPosition' ng-mouseenter="setHighlighting(e.PositionId,e.PositionId,true)" ng-mouseleave="setHighlighting(e.PositionId,e.PositionId,false)">
                                            <td ng-class="{'highlight':e.hightlight}"><p>{{s.Title}}</p> </td>
                                        </tr>
                                    </table>
                                </td>
                            </tr>
                        </table>
                   </td>
                </tr>
            </table>
        </td>
    </tr>
</table>
      
    </diV>
    </div>
    
</div>

CSS

</style> <!-- Ugly Hack due to jsFiddle issue: http://goo.gl/BUfGZ --> 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.0-rc.1/angular.js"></script>
<script src="https://code.angularjs.org/1.4.0-rc.1/angular-animate.js"></script>
<style>
td.highlight  p
{
  background-color:lightgreen;

 
}
tr td p
{
   margin:2px;
}
table
{
  table-layout:fixed;
  
  
}
tr
{
  margin-top:10px;

  vertical-align:top;
}
td{
  margin-left:2px;
  margin-right:2px;

}
table.e-table 
{
  border:solid 1px black;
  width:1200px;

}
table tr td:first-child
{
  width:300px;
}
table.e-table tr
{
 
}
.m-table
{
  table-layout:fixed;
  width:900px;
}
.m-table td
{
  
}
.p-table
{
  table-layout:fixed;
  width:600px;
}
.s-table
{
  table-layout:fixed;
  width:200px;
}

JavaScript

angular.module('App',[])
   .controller('MyCtrl', [
    '$scope',
    function (
      $scope
    ) {
    			$scope.SelectedPositionId = 0;
    			$scope.setcolor= function(positionId)
          {
          	$scope.SelectedPositionId = positionId;
          	$scope.hovering = true;
            console.log($scope.SelectedPositionId);
          }
          	$scope.resetcolor= function()
          {
          	$scope.SelectedPositionId = 0
          	$scope.hovering = false;
            console.log($scope.SelectedPositionId);
          }
          $scope.name = 'angular';
          $scope.hovering = false;
          
          $scope.setHighlighting = function(positionId,ePositionId,category)
          {
          	var executiveJob = null;
          	for(var fi in $scope.jobs)
            {
            	for(var sfi in $scope.jobs[fi].SubFamilies )
              {
              	for(var ji in $scope.jobs[fi].SubFamilies[sfi].Positions)
                {
                  if($scope.jobs[fi].SubFamilies[sfi].Positions[ji].PositionId === ePositionId)
                  {
                    executiveJob = $scope.jobs[fi].SubFamilies[sfi].Positions[ji];
                  }
                }
              }
            }
            if(executiveJob !== null)
            {
           executiveJob.hightlight = true;
            $scope.SetHighlightingForChildren(executiveJob);
            }
          }
          
          $scope.SetHighlightingForChildren = function(position,isHighlighted)
          {
          	for(var child in position.ChildPosition)
            {
            	position.ChildPosition[child].hightlight = isHighlighted;
              if(position.ChildPosition[child].ChildPosition !== null && position.ChildPosition[child].ChildPosition !== undefined)
              {
              	$scope.SetHighlightingForChildren(position.ChildPosition[child]);
              }
            }
          }
           $scope.jobs =...