angularjsscopeng-view

Losing scope between angular modules using ng-view

I seem to be losing scope on my angular controller when I am trying to abstract my Angularjs modules.

It works fine if i use my app module, but as soon as I change the home.js module to app.layout, $scope no longer works.

Can anybody spot an issue here?

_Layout.html (left out includes and head)

<body class="docs-body" ng-app="app">
<div layout="column" ng-cloak>
    <section layout="row" flex>
        <div ng-include="'App/layout/sidenav.html'"></div>
        <md-content class="_md layout-column flex" layout="column" flex="">
            <div ng-include="'App/layout/toolbar.html'"></div>
            <div class="container body-content">
                @RenderBody()
            </div>
        </md-content>
    </section>
</div>
</body>

@RenderBody() brings up Index.html

<!-- this is where content will be injected -->
<div ng-view></div>

Home.html

<div>
<h1>Home Page</h1>
<p>{{ message }}</p>
</div>

My app.js

angular.
.module('app', [
        'app.core',
        'app.layout',
    ]);

})();

layout.module.js

(function () {
'use strict';

angular.module('app.layout', [
    'ngAnimate',
    'ngMaterial',
    'ngAria'
]);

})();

core.module.js

(function () {
'use strict';

angular.module('app.core', [
    'ngRoute'
]);

})();

and route.js:

angular.module('app.core')
    .config(function ($routeProvider, $locationProvider) {
        $routeProvider

        // route for the home page
        .when('/', {
            templateUrl: 'App/layout/home.html',
            controller: 'home'
        });// End routeprovider
    })// end config

And Finally the culprit... Home.js

(function () {
'use strict';

console.log('registering controller home before Angular');

angular
    .module('app.layout')
    .controller('home', home);

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

function home($scope) {
    console.log('registering controller home');
    // create a message to display in our view
    $scope.message = 'Everyone come and see how good I look!';
}

})();

Now, When i have 

.module('app);
.controller('home', home);

on home.js, the $scope.message displays 

'Everyone come and see how good I look!'

but if i have 

.module('app.layout')
.controller('home', home);

it displays

{{message}}

I know I'm losing scope somehow here, but I cant figure out how to fix it! Do I need to declare the controller again outside of the Router?

Solution

  • The solution was rather frustrating. Using Visual Studio's Bundle config, It was adding the home.js file in before it compiled the module files. In doing so, when it tried to build and register the controller, It couldn't find the module. solution was to build all modules first then build controllers by specifying build order in the bundle config.