One of the most appreciated features of AngularJs is thUnderstanding and preventing ng-model data scope is one of the main challenge you get quite often. While working with ng-model data, new unwanted scope can be created by ng-repeat or ng-if procedures. Take a look on following example-

<div ng-app>
  <input type="text" ng-model="data">
   <div ng-repeat="i in [1]">
       <input type="text" ng-model="data"><br/>
        innerScope:
   </div>
   outerScope:
</div>

In the above example, innerScope inherits from outerScope and pass the value in outerScope. If you input a value in innerScope it will reflect in outerScope. But if you edit outerScope, innerScope doesn’t reflect the same value as outerScope because innerScope creates its own field so no longer inherits from outerScope.

To prevent this to happen we can use “Controller As” approach instead of using scope as a container for all data and functions. But one more catchy solution is to keep everything in objects as shown is below example-

<div ng-app>
  <input type="text" ng-model="data.text">
   <div ng-repeat="i in [1]">
       <input type="text" ng-model="data.text"><br/>
        inner scope:
   </div>
   outer scope:
</div>

Now innerScope is no longer creates a new field and editing value in either innerScope or outerScope will reflect in both innerScope and outerScope.