Navigation directive in AngularJS that watches for a change from current page.

Navigation.directive.js

;(function() {

    'use strict';

    /**
     * Main navigation, just a HTML template
     * @author Nathan Daly
     * @ngdoc  Directive
     *
     * @example
     * <main-nav><main-nav/>
     *
     */
    angular
      .module('app')
      .directive('mainNav', ['$location', 'Navigation', 'UserAccount', function ($location, Navigation, UserAccount) {
          return {
              restrict: 'E',
              templateUrl: 'views/directives/main-nav.html',
              link: function (scope, element) {
                 scope.$watch(function () { return Navigation.getPage(); }, function (newPage, oldPage) {
                    if (Object.keys(newPage).length > 0) {
                      element.find('[data-location]').on('click', function () {
                        $location.path($(this).data('location'));
                        scope.$apply()
                      });
                    }
                });
              }
          };
      }]);
})();