declaring 2 controllers for use in a single page - angularjs

Question

I have 2 controllers that i want to use. One of them is ModalDemoCtrl amd the other is ReportController. How do i declare both controllers that shares the same state, url and templateUrl?
app.js
angular
.module('app', [
'ui.router',
'lbServices',
'ngAnimate',
'ui.bootstrap'
])
.config(['$stateProvider', '$urlRouterProvider', function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('report', {
url: '/report',
templateUrl: 'views/report.html',
controller: 'ModalDemoCtrl',
authenticate: true
})
.state('report', {
url: '/report',
templateUrl: 'views/report.html',
controller: 'ReportController',
authenticate: true
});

Answer 1

Can you try something like this
<div ng-controller="FirstController">
<p>Stuff ..</p>
</div>
<div class="menu" ng-controller="SecondController">
<p>Other stuff ...</p>
</div>

Answer 2

You can have more than one controllers in single page, but you cannot have multiple ng-app.
You then define this module and define all your controllers in this module:
//app.js
var app = angular.module('app', ['ui.router']);
app.config(['$stateProvider','$urlRouterProvider',
function($stateProvider,$urlRouterProvider) {
$urlRouterProvider.otherwise("/");
$stateProvider.
state('report', {
url:'/report',
templateUrl: 'views/report.html'
})
}]);
app.controller('ModalDemoCtrl', function($scope) {
$scope.message = 'This is ModalDemoCtrl';
});
app.controller('ReportController', function($scope) {
$scope.message = 'This is ReportController';
});
//report.html
<div class="container">
//ModalDemoCtrl
<div ng-controller = 'ModalDemoCtrl'>
{{ message }}
</div>
//ReportController
<div ng-controller = 'ReportController'>
{{ message }}
</div>
</div>