Angular - Multiple controllers using ControllerAs in route - angularjs

Question

I have an issue which I will go on to explain. When using ControllerAS at the top of a html page such like this:
<div ng-controller="MyController as myControllerVM">
I can refer to things in my controller using the myControllerVM name.
Ie in my controller I set up a variable this and assign other variables to it like this:
var vm = this;
vm.number = 1;
I can then refer to this variable in the html like this:
myControllerVM.number
as long as at the top of my page I have
<div ng-controller="MyController as myControllerVM">
What I want to do is accomplish the same thing only through routing. I have tried this:
.when(myROUTE, {
templateUrl: 'template.html',
controller: 'MyController',
controllerAs: 'myControllerVM'
and assigned everything in the controller to the variable vm which points to this as before. But in my html page these values are not getting pulled through as they were when the "controller as" name as at the top of the html page, i.e. I can no longer refer to the values in the html as myControllerVM.name (the value isn't being pulled through). The reason I need it in the route is because I want to use different controllers for the one html page.
Why isn't using controllerAs in the route working.

Answer 1

I can't see all your code but you can find working example here
http://plnkr.co/edit/aedTeP2DbicGYwdGWKvU?p=preview
ie:
myApp.config(function($stateProvider, $urlRouterProvider) {
//
// For any unmatched url, redirect to /state1
$urlRouterProvider.otherwise("/state1");
//
// Now set up the states
$stateProvider
.state('state1', {
url: "/state1",
templateUrl: "state1.html",
controller: 'state1Ctrl',
controllerAs:'vm'
})
.state('state2', {
url: "/state2/",
templateUrl: "state2.html",
controller: 'state2Ctrl',
controllerAs:'vm'
});
});
myApp.controller('state2Ctrl', function(){
var vm = this;
vm.title= "That is my second"
});
myApp.controller('state1Ctrl', function($scope){
var vm = this;
vm.title= "fist controller";
});

Answer 2

You're doing everything correct with
.when(myROUTE, {
templateUrl: 'template.html',
controller: 'MyController',
controllerAs: 'myControllerVM'
I'm not sure if Angular documentation is clear enough on that, but the scope of router's current controller is ngView's scope. So you can use MyController scope variables (including the ones that use myControllerVM identifier) only in template or ngView element attributes. I guess it is the source of the problem.