Angular ui-router: child state not accessible to parent controller

I am using ui.router

nested views in my Angular app. This is the relevant part of mine .config

:

$urlRouterProvider.otherwise('/');

$stateProvider
.state('home', {
    url: '/',
    templateUrl: 'app/components/home/home.html',
    controller: 'HomeController'
})
.state('admin', {
    url: '/admin',
    templateUrl: 'app/components/admin/admin-dashboard.html',
    controller: 'AdminCtrl'
})
.state('admin.page-1', {
    templateUrl: 'app/components/admin/page-1/page-1.view.html',
    controller: 'AdminCtrl'
})

      

        
        
        
      

    

What is happening, although the view admin.page-1

is loading correctly inside the view admin

, it doesn't seem to have access to it AdminCtrl

.

This is the controller:

(function() {
    'use strict';

    angular
        .module('peaches')
        .controller('AdminCtrl', Controller);

    Controller.$inject = ['$scope'];

    function Controller($scope) {
        var vm = this;

        vm.test = "Hello."
        console.log(vm.test);

        vm.organization  = {
            name: "Western Fund"
        };

        activate();

        function activate() {

        }
    }
})();

      

        
        
        
      

    

console.log(vm.test)

Works when I go to admin.page-1

, but it doesn't load inside my nested view,, page-1.view.html

here:

<div class="col-xs-12">
    <h1>{{vm.test}}</h1>
</div>

      

        
        
        
      

    

What am I doing wrong?