AngularJS Example:

HTML

<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css">
<div ng-controller="HomeCtrl" ng-app=app>

<h1>{{page.title()}}</h1>

<p> <a href="#/home">Home</a> |
    <a href="#/list">List</a> |
    <a href="#/settings">Settings</a>
</p>

<hr>
    <ng-view>Loading...</ng-view>
<hr>


<!-- Inline Templates (Partials) -->
    
<script type=text/ng-template id=home.html>
    <div ng-bind-html-unsafe="menu"></div>
</script>

<script type=text/ng-template id=list.html>
    <div ng-bind-html-unsafe="menu"></div>
</script>

<script type=text/ng-template id=settings.html>
    <div ng-bind-html-unsafe="menu"></div>
</script>
    

</div>

JavaScript

var app = angular.module('app', [])
    .config(['$routeProvider', function($routeProvider) {
        $routeProvider.
                when('/home', {templateUrl: 'home.html',   controller: HomeCtrl}).
                when('/list', {templateUrl: 'list.html',   controller: ListCtrl}).
                when('/settings', {templateUrl: 'settings.html',   controller: SettingsCtrl}).
                otherwise({redirectTo: '/home'});
}]);

/* Services  */
app.factory('Menu', function () {
    var activeMenu;
    var menu = {
        home: '<button>A</button><button>B</button>',
        list: '<button>C</button><button>D</button>',
        settings: '<button>E</button><button>F</button>',
    }
    
    function setMenu(name) {
        console.log(name);
        activeMenu = name;
    }
    function getActiveMenu() {
        return menu[activeMenu];    
    }
    
    return {
        setMenu: setMenu,
        getMenu : getActiveMenu
    }
});

/* Controllers */

function HomeCtrl($scope, Menu) {
    Menu.setMenu('home');
    $scope.menu = Menu.getMenu();
}


function ListCtrl($scope, Menu) {
    Menu.setMenu('list');
    $scope.menu = Menu.getMenu();

}

function SettingsCtrl($scope, Menu) {
    Menu.setMenu('settings');
    $scope.menu = Menu.getMenu();
}