How to use databinding in two views with same controller

Question

Imagine a simple variable string in a controller MyCtrl:

$scope.simpleString = 'hi i am your simple string!';

which is the the Angular model of a simple text input:

<input type="text" ng-model="simpleString">

This input now is used in two different views part1 and part2:

<div ng-controller="MyCtrl">
    <div ng-include="'part1'"></div>
    <div ng-include="'part2'"></div>
</div>

Using two different views seems to break my databinding although it is supposed to be in the MyCtrl scope.

Info: I also tried to use ui-view but it boils down to the very same thing.

changing the `input` *model* in one view does not update the other view — DonJuwe, Feb 25 '15 at 08:34
Your problem is most probably the top level binding and prototypical inheritance, because `ng-include` creates a new scope. Do `$scope.mydata.simpleString = '...'` and ``. — Nikos Paraskevopoulos, Feb 25 '15 at 08:35
possible duplicate of [AngularJS - losing scope when using ng-include](http://stackoverflow.com/questions/11412410/angularjs-losing-scope-when-using-ng-include) — Andresch Serj, Feb 25 '15 at 08:36

score 1 · Answer 1 · edited May 23 '17 at 12:28

1

you need to set $scope.simpleString to be an object like this:

$scope.data = {
  simpleString: 'John'
}

that'll prevent the variables from shadowing one another. I wrote an answer relating this here

edited May 23 '17 at 12:28

Community

answered Feb 25 '15 at 08:36

Nitsan Baleli

1 Answers1