Load AngularJS Template within page, dynamically

It appears that the $compile service, when fed the elements you wish to recompile along with your current scope, does what I was looking for.

Example from my source:

var appPane = $('#AppPane');//JQuery request for the app pane element.appPane.html(data);//The dynamically loaded data$compile(appPane.contents())($scope);//Tells Angular to recompile the contents of the app pane.

This should help anyone experiencing my problem, I hope.

Look at $routes and ngView in angularjs.

Here's a very basic example:

http://jsfiddle.net/pXpja/3/

Take a look at the uiRouter module (from the AngularUI project). It adds the concept of states, which are pretty similar to routes, but with other goodies, such as the ability to nest them. For example:

$stateProvider    .state('myState', {        url: '/mystate',        templateUrl: '...',        controller: 'MyCtrl'    })    .state('myState.substate', {        url: '/{substate}',        templateUrl: '...',        controller: 'MySubCtrl'    });

MySubCtrl will be activated whenever you go to /mystate/something and you can use that "something" as a parameter (see $stateParams). You can nest states to any amount of levels.