We are attempting to upgrade from AngularJS 1.0.7 to 1.2.1. In 1.0.7, we were able to set the controller for an ng-include alongside in the same element, like so

<div data-ng-include="'include1.html'" data-ng-controller="MyCtrl1"

MyCtrl1 would bee available to the code inside include1.html.

This breaks when moving to AngularJS 1.2.1 which I have illustrated in this plunkr. If you change the referenced version to 1.0.7 it works again.

I am interested in understanding what has changed/why this is. I tried searching but couldn't find anything or I am not using the right terms.

Additionally, what would be the correct way to specify a controller for my ng-includes?

We are attempting to upgrade from AngularJS 1.0.7 to 1.2.1. In 1.0.7, we were able to set the controller for an ng-include alongside in the same element, like so

<div data-ng-include="'include1.html'" data-ng-controller="MyCtrl1"

MyCtrl1 would bee available to the code inside include1.html.

This breaks when moving to AngularJS 1.2.1 which I have illustrated in this plunkr. If you change the referenced version to 1.0.7 it works again.

I am interested in understanding what has changed/why this is. I tried searching but couldn't find anything or I am not using the right terms.

Additionally, what would be the correct way to specify a controller for my ng-includes?

• javascript
• angularjs
• controller

1 Answer 1

Why not move the ng-controller from the element having ng-include to inside the template:

index.html:

<div data-ng-include="'include1.html'"></div>    
<div data-ng-include="'include2.html'"></div>

include1.html

<div data-ng-controller="MyCtrl1">
    <h1>{{Username}}</h1>
</div>

include2.html

<div data-ng-controller="MyCtrl2">
    <h1>{{Username}}</h1>
</div>

It seems ngController and ngInclude cannot be used in conjunction with each other since Angular version 1.2:

Issue 1, Issue 2, Issue 3 and SO post.