AngularJS - ng-include ng-controller and scope not binding
angularjs, javascript
Solution
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.
Problem
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.