angularjs - changing the list and detail view templates ng-view -

i want load template in main page, list , detail view example, can stateprovider or have use routeprovider? how can import template there not changing link?

app.config(function config( $stateprovider ) {   $stateprovider.state('inventory',{     url:'/inventory',         views: {             "main": {                 controller: 'inventoryctrl',                 templateurl: 'inventory/main.tpl.html'             }         },         data:{ pagetitle: 'inventory' }   }   ).state('add',{     url:'/inventory/list',         views: {             "main": {                 controller: 'inventoryctrl',                 templateurl: 'inventory/add.tpl.html'             }         },         data:{ pagetitle: 'list field' }   }); }); 

template

<li data-ng-class="{active: listviewenabled}" class="toolbaritem"><a href="#/inventory/list"><span class="glyphicon glyphicon-align-justify"></span> list view</a></li>   <div ng-view="main"></div> 

i think in case useful directive ng-include.

e.g. <div ng-include="template.url"></div>

and in controller:

$scope.changetemplate = function(templatename){     $scope.template.url = '/path/to/'+templatename; } 

docs: http://code.angularjs.org/1.2.13/docs/api/ng.directive:nginclude