When working with AngularJS, $scope will have a pivotal role in your work and when starting out, you might run into road bumps unless you have a rough idea of how to work with it. I’ll aim to explain a couple issues about $scope and ngInclude that I’ve run into.

Below you’ll learn how to avoid targeting $parent or $childscopes when using ng-include, and how to debug your code when realizing that $watchers aren’t operating on the correct model or scope.

$scope ID

First, you need to understand this: Each controller has its own scope, and each scope has a unique ID. Listeners/watchers will apply only to the models in the scope where they were applied.

For instance, a watcher in controller AppCtrl.js who listens to $scope.my_model, will only listen to that model in that scope, not on my_model in a scope with a different ID.

You can find the scope ID in $scope.$id.

Nested controllers $scope ID

When working with nested controllers, such as the example below..

index.html