In AngularJS 1.2, how do I specify the controller for an ng-include?

Question

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 become 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-include s?

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 .