understanding the controller scope in angularJS

Question

Consider two div areas as follows, in html file

<div class="divArea1" ng-controller="myController">
   <input ng-click="updateName()" type="button" value="button"/>
</div>

<div class="divArea1" ng-controller="myController">
  <p>{{name}}</p>
</div>

Following is the angular js example

productApp.controller("myController", [ '$scope', function($scope) {
    $scope.name= "XYZ";
    $scope.updateName= function() {
        $scope.name = "ABC";
    };
} ]);

problem is when I am trying to update the name, upon click on update button it is not visible in the second in the div area. Is there any mistake i am doing.

you have two controller, so they have own scopes. When you do ng-controller="myController" angular behind do something like new myController(...dependencies...) so you just create two instances — Grundy
– Grundy, Commented Oct 30, 2015 at 9:43
You should put your controller in the parent container of those two divs. Even if you name the controller the same way, angular instanciates it twice, with two different scopes — sailens
– sailens, Commented Oct 30, 2015 at 9:46
if you use it inside one div it should work , as angular $scope inherits from the parent controller — Shushanth Pallegar
– Shushanth Pallegar, Commented Oct 30, 2015 at 9:46
ya it works when wrap them within the one div, Thank you all for your reply — Hareesh
– Hareesh, Commented Oct 30, 2015 at 10:26

sailens · Accepted Answer · 2015-10-30 09:48:33Z

1

What you have is two different controllers (with two separate scopes) with the same name.

You need to put the controller in the parent controller to keep the name in the same scope as the button:

<div id="container" ng-controller="myController">
   <div class="divArea1">
      <input ng-click="updateName()" type="button" value="button"/>
   </div>

   <div class="divArea1">
     <p>{{name}}</p>
   </div>
</div>

answered Oct 30, 2015 at 9:48

sailens

1,6041 gold badge18 silver badges34 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Deblaton Jean-Philippe · Accepted Answer · 2015-10-30 09:53:53Z

Controllers are not singletons. Each time you have a new controller, you're having a new instance of this controller, with a new isolated scope.

If your need is to share data between controllers, you should use a factory (which is a singleton).

angular.module('app').factory('mySharedData', function(){
   var service = {
       object : objectToShare
   };

   var objectToShare =  {};

   return service;
});

And from your controller :

angular.module('app').controller('myController', 
    ['$scope','mySharedData', 
    function($scope, mySharedData){
        $scope.someObject = mySharedData.object;
        $scope.updateName= function() {
            $scope.someObject.name = "ABC";
        };
    }
]);

And from your view :

<div class="divArea1" ng-controller="myController">
   <input ng-click="updateName()" type="button" value="button"/>
</div>

<div class="divArea1" ng-controller="myController">
  <p>{{someObject.name}}</p>
</div>

Note : I've encapsulated the name property into an object because objects are passed by reference, and strings by value. This allows you to make it easier to share your values and to have it automatically updated into the service and other controllers, without having to access your property through accessors.

Jayant Patil · Accepted Answer · 2015-10-30 09:52:14Z

0

here is demo http://jsfiddle.net/wg7pb1yu/3/ inject $rootScope so that it will do from global scope

productApp.controller("myController", [ '$scope','$rootScope', function($scope, $rootScope) {
$rootScope.name= "XYZ";
$scope.updateName= function() {
    $rootScope.name = "ABC";

};} ]);

Hope this will help you

edited Oct 30, 2015 at 9:52

answered Oct 30, 2015 at 9:51

Jayant Patil

1,5872 gold badges11 silver badges18 bronze badges

2 Comments

sailens Over a year ago

The use of rootScope is not recommended, since it overloads the digest()

Grundy Over a year ago

instead injection $rootScope you can use $scope.$root

Collectives™ on Stack Overflow

understanding the controller scope in angularJS

3 Answers 3

Comments

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related