Parse URL using AngularJS

http://angularjs.org/

HTML

<script src="http://code.angularjs.org/1.0.8/angular.js"></script>
<div ng-app="app">
    <p>Dynamically load Foo &amp; Bar modules:</p>
    <div ng-controller="AppCtrl" ng-repeat="module in modules" ng-repeat-finished="done()">    
        <div ng-controller="ModuleCtrl" id="{{module.name}}" class="border">
            rootMessage: {{rootMessage}}<br>
            localMessage: {{localMessage}}
        </div>
    </div>
</div>

CSS

.border { border: 1px solid #eee; margin: 0 5px; }

JavaScript

angular.module('app', [])
.controller('AppCtrl', function ($scope, $controller) {
    $scope.modules = [
        { name: "Foo", controller: "FooCtrl" },
        { name: "Bar", controller: "BarCtrl" }]
})
.controller('ModuleCtrl', function ($scope, $rootScope, $controller) {
    $controller($scope.module.controller, { $rootScope: $rootScope, $scope: $scope });
}).controller('FooCtrl', function ($rootScope, $scope) {
    $rootScope.rootMessage = "I am foo";
    $scope.localMessage = "I am foo";
    console.log("Foo here");
})
.controller('BarCtrl', function ($rootScope, $scope) {
    $rootScope.rootMessage = "I am bar";
    $scope.localMessage = "I am bar";
    console.log("Bar here");
});