Using a different ng-controller with a ng-include

Question

When I use a ng-include I can't change the controller that is used by setting the ng-controller inside the include. The controller isn's 'seen' by the include. It work if I define the controller in the calling div include.

example:

I have a include like:

<div ng-controller="baseController">
  <div ng-include="other.html"></div>
</div>

the other.html is defined as:

<div ng-controller="subController">
  <ul>
    <li ng-repeat="address in addresses">
      {{ address.name }}
    </li>
  </ul>
</div>

In this version the address will not display any of the addresses but if I change the code to:

 <div ng-controller="baseController" ng-controller="subController">
    <div ng-include="other.html"></div>
 </div>

the other.html is defined as:

<div >
  <ul>
    <li ng-repeat="address in addresses">
      {{ address.name }}
    </li>
  </ul>
</div>

everything works fine and the addresses are displayed.

Why?

Regards

Jaap van der Kreeft

Answer 1

Please find the plunkr

<div ng-controller="baseController">
  <div ng-include src="'other.html'"></div>
</div>

The inner quotes are needed if you are passing src as a string. You would typically do that for a file that will never change. When you might need to change the file, you are better to set the value to an Angular variable and reference that in the tag.

EX:

<div ng-include src="templatePath"></div>

& the script code is

 $scope.templatePath = "other.html";

Answer 2

Try this:

<div ng-controller="baseController">
  <div ng-include="'other.html'"></div>
</div>