We defined 2 controllers in our module with takes $scope as input. We then added the ‘name’ property to each one. Result:

As you can see, the $scope object used by the two controllers are not the same $scope object. Angular JS provides a new object to each controller that is visible to a certain part of view.

Every application has a single root scope ($rootScope). All other scopes are descendant scopes of the root scope. You can use it by passing it into your controller like $scope. Variables set at the root-scope are available to the controller scope via prototypical inheritance, so this could be use to share data among different controllers.

It’s important to note that AngularJS services are always singletons (except $scope). This means that, once AngularJS constructs a service object, the same instance is reused throughout your app. There are never ever two service instances. This makes them great candidates to share application data across multiple components. Lets see this by an example:

Notice we included angular-messages.min.js after the angular js file. Then we created a simple form with one field only and used few error conditions. Now we have to tell angular that we need to use this module. Based on the documentation we know that it is called ngMessages. main.js:

Remember the second parameter in the module function which till now we passed an empty array. Its actually an array of dependencies that can be passed to angular. So we passed ‘ngMessages’ as a dependency to our angularApp module. Now we can use its services.