AngularJs - Using ng-controller with ng-include

Question

This works:

<div ng-include="'login.html'" flex ng-if="!loggedIn" ng-controller="LoginController"></div>

However, this doesn't ( {{test}} outputs nothing):

<ng-include src="'login.html'" flex ng-if="!loggedIn" ng-controller="LoginController"></ng-include>

Is there any reason? Or is it a bug?

login.html:

<p>{{test}}</p>

LoginController:

function LoginController($scope){
    $scope.test = 'login';
}

Answer 1

I'm not exactly sure where "loggedIn" is defined, but when I define it on a parent controller, both syntaxes work as expected.

Plunkr

<div ng-controller="PrntCtrl">
      <div ng-include="'test.html'" flex ng-if="!loggedIn" ng-controller="TestCtrl"></div>
      <ng-include src="'test.html'" flex ng-if="!loggedIn" ng-controller="TestCtrl"></ng-include>
    </div>

Some questions to consider: What version of angular are you using? How is your app defined and how is the controller registered with the app? Where is "loggedIn" defined?

Answer 2

Because this directive accepts only 3 arguments:

• ngInclude | src = string
• onload (optional) = string
• autoscroll (optional) = string

...according to the ngInclude Docs

EDIT:

you can solve simply wrap it in another element...

<div ng-if="!loggedIn" ng-controller="LoginController">
  <div ng-include="'login.html'" flex></div>
</div>