AngularJS - ng-include ng-controller and scope not binding

Question

I have the following main view

<div ng-include="'otions.html'"></div>

and options.html has the following

<div ng-controller="OptionsController">Options</div>
<input type="text" ng-model="keyword" value="{{keyword}}" />
<button ng-click="search()">Search</button>

But "keyword" is not binding to the scope in OptionsController.

app.controller('OptionsController', 
              ['$scope', function($scope) {

  $scope.keyword = "all";
  $scope.search = function() {
    console.log("hello")
  };

}]);

when I click on the button, I don't see hello and the keyword all doesn't appear in the input text.

I tried moving the ng-controller part as follows

<div ng-controller="OptionsController" ng-include="'otions.html'"></div>

And things work as expected.

I read through the answers in AngularJS - losing scope when using ng-include - and I think my problem is related, but just need some more explanation to undertstand what's going on.

Not sure if it's a typo here but also in your source: the file you're including is references as otions.html instead of options.html — thomaux
– thomaux, Commented Jan 27, 2014 at 8:01
In your source you specify ng-controller for the first div only, so your input and button are not in the scope of your controller. Probably it is a typo. If not then it could be a reason. — GRaAL
– GRaAL, Commented Jan 27, 2014 at 10:18

Community · Accepted Answer · 2016-10-19 14:55:44Z

7

You should write options.html like this:

<div ng-controller="OptionsController">Options
<input type="text" ng-model="keyword" value="{{keyword}}" />
<button ng-click="search()">Search</button>
</div>

OptionsController should be put in the outer html element.

edited Oct 19, 2016 at 14:55

CommunityBot

11 silver badge

answered May 14, 2014 at 5:45

Andy Ma

3283 silver badges7 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Miniver Cheevy Over a year ago

Good catch, I missed that. In the original html the input it outside of the div marked with the controller so the scope variable doesn't exist.

Community · Accepted Answer · 2017-05-23 12:33:18Z

0

i have face same problem,

Under main tag it will be work fine but, When bind some data to nav.html it not work.

find this link

AngularJS - losing scope when using ng-include

inside include its work child scope. better option to create custom directive its easy solution

edited May 23, 2017 at 12:33

CommunityBot

11 silver badge

answered Jan 28, 2016 at 13:32

Ashish Kadam

1,4872 gold badges13 silver badges18 bronze badges

Collectives™ on Stack Overflow

AngularJS - ng-include ng-controller and scope not binding

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related