I am currently using ui.router's nested views feature in my Angular application.
Here is the relevant part of my .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'
})
The Issue I'm facing is that even though the admin.page-1 view loads correctly within the admin view, it appears to lack access to the AdminCtrl.
This is the structure of 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() {
}
}
})();
While the console.log(vm.test) functions properly when navigating to admin.page-1, it does not seem to load inside my nested view, page-1.view.html, here:
<div class="col-xs-12">
<h1>{{vm.test}}</h1>
</div>
What could be causing this issue?