Directives inside ng-include

Question

I\'m building a simple angularjs app and I\'m trying to implement login without page refresh.

What I\'m doing

On init the ng-include loads

Answer 1

Here is a working plunker: http://plnkr.co/edit/ilVbkHVTQWBHAs5249BT?p=preview

You got bitten by using a primitive value on the scope.

• When you put fblogin outside of ngInclude it's on the same scope of the controller.
• ngInclude always creates a new child scope so any directive inside it is on a child scope.

From Understanding Scopes wiki:

Scope inheritance is normally straightforward, and you often don't even need to know it is happening... until you try 2-way data binding (i.e., form elements, ng-model) to a primitive (e.g., number, string, boolean) defined on the parent scope from inside the child scope.

It doesn't work the way most people expect it should work. What happens is that the child scope gets its own property that hides/shadows the parent property of the same name. This is not something AngularJS is doing – this is how JavaScript prototypal inheritance works.

New AngularJS developers often do not realize that ng-repeat, ng-switch, ng-view and ng-include all create new child scopes, so the problem often shows up when these directives are involved.

This issue with primitives can be easily avoided by following the "best practice" of always have a '.' in your ng-models.

What happens in your case is that scope.saveTemplate = '/set/continue'; just create a variable on the child scope which shadows scope.saveTemplate of the parent scope (controller).