Solved: Liferay Parent Child Nav elements highlighted

So some background.

I have 2 pages at the top horizontally aligned. When one of those is selected, I have 5 pages. Under one of those, the child pages were not showing my "selected" css classes. I wanted them to show up but nothing was working. So I did some basic print outs to the screen with the boolean values of isSelected and isChildSelected. From there I came up with the solution below. 

Basically if isSelected() was false and isChildSelected() was true then display the css class "selected" element for the child menu element. 

 #if (!$nav_child.isSelected() && $nav_child.isChildSelected())                       
                            <li class="sub_menu">           
                                <a class="selected" href="$nav_child.getURL()" $nav_child.getTarget()>$nav_child_upper.toUpperCase()</a>
                            </li>

twitter json api example with angular js

http://stackoverflow.com/questions/16195199/create-a-jsonp-api-in-angularjs-consume-with-jquery


http://angular-ui.github.io/ng-grid/

<!doctype html>
<!-- Create a basic module -->
<html lang="en" data-ng-app="jsonApp">
<head>
    <title>Services Test</title>


    <link href="css/site.css" rel="stylesheet" type="text/css">
</head>
<body >


{{ 1 + 2 }}



<div ng-controller="getJSON">

    <a href="#" ng-click="getDetails()">View Details</a>

    <ul>
        <li ng-repeat=""></li>
    </ul>

</div>


<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.1/angular.min.js"></script>
<script>
    var jsonApp = angular.module('app', [] );

    jsonApp.controller('getJSON', function($scope) {

        $scope.getDetails = function() {
            $http.get(...).success(function(data){
                $scope.story = data;
            });
        }
    })
</script>


</body>
</html>