Title: ng-model not working inside ng-include
Tags: javascript;angularjs;angularjs-ng-include
Question: I am a beginner in angularjs and currently I am facing an issue with ng-include.

I have a test app using partials.
Here is my code.

```<html ng-app ="TextboxExample"&gt;
    <head&gt;
        <title&gt;Settings</title&gt;
        <script src="angular.js"&gt;</script&gt;
  </head&gt;

    <body ng-controller="ExampleController"&gt;
        <div ng-include src = "'view.html'"&gt;</div&gt;
        <script&gt;
          angular.module('TextboxExample', [])
            .controller('ExampleController', ['$scope', function($scope) {
              $scope.textboxVal = 'fddfd';

              $scope.ReadGeneralSettings = function() {
                alert($scope.textboxVal);
              }
              $scope.ResetGeneralSettings = function() {

                $scope.textboxVal = 'fddfd';
              }

            }]);
        </script&gt;
        <button class="pull-right" ng-click = "ReadGeneralSettings()"&gt;Read</button&gt;
        <button class="pull-right" ng-click = "ResetGeneralSettings()"&gt;Cancel</button&gt;



    </body&gt;
</html&gt;
```

The partial code view.html is

```<input type="text" ng-model="textboxVal"&gt;
```

For some reason, textboxVal set to ng-model doesn't get updated when I enter the value in the text box.
But this works fine if I don't use ng-include and directly add the content of view.html into the main html file.
Please help.

Thanks
Sunil

Comment: ng-include creates a new scope

Comment: Check my answer below

Comment: ok, so I can I make it work?

Here is the accepted answer: Use $parent to access the scope of the controller

Demo

```<input type="text" ng-model="$parent.textboxVal"&gt;
```


Here is another answer: The problem is that ```ngInclude``` creates new scope, so the model you define inside partial template with ```ngModel``` works with local scope value, and outer ```ExampleController``` can't see it.

The simple solution is to use prototypical chain of scope objects, then inner scope will inherit and use model value from the outer scope:

```<body ng-controller="ExampleController"&gt;
    <div ng-include src = "'view.html'"&gt;</div&gt;
    <script&gt;
      angular.module('TextboxExample', [])
        .controller('ExampleController', ['$scope', function($scope) {
          $scope.model.textboxVal = 'fddfd';

          $scope.ReadGeneralSettings = function() {
            alert($scope.model.textboxVal);
          }
          $scope.ResetGeneralSettings = function() {
            $scope.model.textboxVal = 'fddfd';
          }

        }]);
    </script&gt;
    <button class="pull-right" ng-click = "ReadGeneralSettings()"&gt;Read</button&gt;
    <button class="pull-right" ng-click = "ResetGeneralSettings()"&gt;Cancel</button&gt;

</body&gt;
```

and then use it in partial as 

```<input type="text" ng-model="model.textboxVal"&gt;
```


{'source': 'StackExchangeDataset', 'subset': 'stackoverflow.com', 'metadata': {'AnswerCount': 2, 'CommentCount': 3, 'ContentLicense': 'CC BY-SA 3.0', 'CreationDate': '2015:00:09/25/15', 'FavoriteCount': 4.0, 'PostTypeId': 1, 'Tags': '<javascript><angularjs><angularjs-ng-include>', 'Title': 'ng-model not working inside ng-include', 'ViewCount': 8123, 'id': 32775461, 'user_AboutMe': '', 'user_AccountId': 2055196.0, 'user_DisplayName': 'S_R', 'user_Reputation': 473.0, 'user_Views': 81.0, 'user_id': 1833142.0}}