Parse URL using AngularJS

http://angularjs.org/

HTML

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

CSS

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

JavaScript

console.clear();

angular.module('app', [])
.controller('AppCtrl', function ($scope, $controller) {
    
    $scope.modules = [
        { name: "Foo", controller: "FooCtrl" },
        { name: "Bar", controller: "BarCtrl" },
        { name: "_last_", controller: "_last_" } // this is just so Bar has finished rendering when this fires ng-repeat-finished
    ];
    
    $scope.done = function() {
        console.log("Done loading ng-repeat");
        
        for(var i = 0; i < $scope.modules.length; i++) {            
            var module = $scope.modules[i];
            
            // add ng-controller to the div
            // this doesn't seem to work :(
            var $div = $('#' + module.name);
            $div.attr('ng-controller', module.controller);
            
            if (module.name !== "_last_") {
                var $newScope = $scope.$new();
                $controller(module.controller, {
                    $rootScope: $scope,
                    $scope : $newScope
                });
            }
        }        
    };
})
.directive('ngRepeatFinished', 
    ['$timeout', function($timeout) {
        return {
            restrict: 'A',
            link: function(scope, element, attr) {                
                if (scope.$last) {
                    scope.$evalAsync(attr.ngRepeatFinished);
                }
            }
        };
    }]
)
.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");
});