AngularJS - Multiple ng-view in single template
UI-Router is a project that can help: https://github.com/angular-ui/ui-router One of it's features is Multiple Named Views
UI-Router has many features and i recommend you using it if you're working on an advanced app.
Check documentation of Multiple Named Views here.
You can have just one ng-view
.
You can change its content in several ways: ng-include
, ng-switch
or mapping different controllers and templates through the routeProvider.
I believe you can accomplish it by just having single ng-view
. In the main template you can have ng-include
sections for sub views, then in the main controller define model properties for each sub template. So that they will bind automatically to ng-include
sections. This is same as having multiple ng-view
You can check the example given in ng-include
documentation
in the example when you change the template from dropdown list it changes the content. Here assume you have one main ng-view
and instead of manually selecting sub content by selecting drop down, you do it as when main view is loaded.