Dynamically loading views / controllers in Angular JS

Question

We are developing an configuration tool using Angular.JS. The GUI contains 2 sections - a left panel which contains a tree view, which list all the configuration items and a right panel which contains screens using which configuration items can be edited . There are about 6 or 7 different types of configuration items and each of them contains different views...

Currently we have a single view and controller because a single API call fetches all the data. Each configuration screen is a div tag which is shown / hidden where the tree node is clicked... The code is becoming more cluttered... Is there any way to separate each configuration screen as a separate view / controller and dynamically with out using routing

Answer 1

What about ng-include?

<div ng-include="view1.html" ng-if="selected == 1">
<div ng-include="view2.html" ng-if="selected == 2">
<div ng-include="view3.html" ng-if="selected == 3">

And in each html u can specify own controller etc.