ngResource

<!doctype html>
<html ng-app="plunker">
  <head>
    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.5/angular.min.js"></script>
    
    <script src="script.js"></script>
    <link rel="stylesheet" href="main.css" />
  </head>
  <body>

<div>
  <ul menu ng-controller="Navigation">
    <li><a href="#">Category A</a>
        <ul>
            <li><a href="a1.html">a1</a></li>
            <li><a href="a2.html">a2</a></li>
        </ul>
    </li>
    <li><a href="#">Category B</a>
        <ul>
            <li><a href="b1.html">b1</a></li>
            <li><a href="b2.html">b2</a></li>
        </ul>
    </li>
    <li><a href="contact.html">contact</a></li>
  </ul>
  
  <input ng-model="currentPage" />
  <br>
  currentPage: {{currentPage}}
</div>


  </body>
</html>

var app = angular.module('plunker', []);
app.controller('Navigation', 
    function($scope) {}
  );

app.directive('menu',
    function(){
      return {
        link: function ($scope, $element) {
          var link, li;
          $scope.$watch('currentPage', function(page){
            activate(page);
          });
          
          function activate(page){
            angular.forEach($element.find('li'), function(elm){
              li = angular.element(elm);
              link = li.find('a');
              console.log(link.attr('href'));
              if(link.attr('href') === $scope.currentPage){
                li.addClass('active');
                var parent = li.parents('li');
                console.log('parent', parent);
                li.parents('li').addClass('active');
                return;
              }
              li.removeClass('active');
            });
          }
        }
      };
    }
  );

li.active > a {
    color: red;
}