Допустим используя ui.router:
index.htnl
<!DOCTYPE html>
<html ng-app="myapp" ng-controller="AppCtrl">
<head>
<script src="angular.js"></sctipt>
<script src="ui-router.js"></sctipt>
<script src="myscr.js"></sctipt>
</head>
<body>
<div ui-view="content"></div>
</body>
</html>
myscr.js
angular.module('myapp', [
])
.controller("AppCtrl", function(){})
.controller("State1Ctrl", function(){
//code here
})
.controller("State2Ctrl", function(){
//code here
})
.config([
'$stateProvider',
'$urlRouterProvider',
function (
$stateProvider,
$urlRouterProvider
) {
$urlRouterProvider.otherwise('/state1url');
$stateProvider
.state('state1', {
url: '/state1url',
views: {
content: {
controller: 'State1Ctrl',
templateUrl: 'pathto/state1tpl.html'
}
}
})
.state('state2', {
url: '/state2url',
views: {
content: {
controller: 'State2Ctrl',
templateUrl: 'pathto/state1tpl.html'
}
}
})
}
]);
Вот тебе один темплейт и два контроллера