active menu item highlight

app/app.js

@@ -62,7 +62,35 @@ var app = angular.module(
         sessionTimeout: 'auth-session-timeout',
         notAuthenticated: 'auth-not-authenticated',
         notAuthorized: 'auth-not-authorized'
-    });
+    }).
+
+/**
+ * Directive to highlight current menu item
+ */
+
+
+    // todo: not working properly, get it done!
+    directive('activeLink', ['$location', function($location) {
+        return {
+            restrict: 'A',
+            link: function($scope, $element, $attrs) {
+                var clazz = $attrs.activeLink;
+                var path = $location.path();
+                path = path //hack because path does not
+                // return including hashbang
+                $scope.location = $location;
+                $scope.$watch('location.path()', function(newPath) {
+                    if (path === newPath) {
+                        console.log(path, newPath);
+                        $element.addClass(clazz);
+                    } else {
+                        console.log(path, newPath);
+                        $element.removeClass(clazz);
+                    }
+                });
+            }
+        };
+    }]);
 
 // test the code with strict di mode to see if it works when minified
 //angular.bootstrap(document, ['zaerp'], {

app/index.html

@@ -48,11 +48,11 @@
     <div class="row">
         <div class="col-sm-3 col-md-2 sidebar">
             <ul class="nav nav-sidebar">
-                <li><a href="#/students">Students</a></li>
-                <li class="active"><a href="#/student/add">New Student</a></li>
-                <li><a href="#/staffs">Staffs</a></li>
-                <li><a href="#/staff/add">New Staff</a></li>
-                <li><a href="#/input_types">Types</a></li>
+                <li active-link="active"><a href="#/students">Students</a></li>
+                <li active-link="active"><a href="#/student/add">New Student</a></li>
+                <li active-link="active"><a href="#/staffs">Staffs</a></li>
+                <li active-link="active"><a href="#/staff/add">New Staff</a></li>
+                <li active-link="active"><a href="#/input_types">Types</a></li>
             </ul>
         </div>