One of the most appreciated features of AngularJs is scopes, at the same time scopes will give you nightmare if don’t avoid unwanted scopes from creating.
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. Let’s look at the below example
See the Pen Angular unwanted scope creation by Logesh Paul (@logeshpaul) on CodePen.
In the above example, the scope is created separately for innerScope and outerScope, so it does not share it’s data. We can handle this with single scope - One way to do this is we can use “Controller As” approach instead of using scope as a container for all data and functions.
One catchy solution is to keep everything in objects as shown is below example
See the Pen Angular avoiding unwanted scope creation by Logesh Paul (@logeshpaul) on CodePen.
Credits: http://www.jstips.co/en/angular/preventing-unwanted-scopes-creation-in-angularjs/
Let me what methods/best practices you follow to avoid unwanted scopes from creating in AngularJS.