Understanding Angularjs scope

Question

I am working angularjs scope, I countered an interesting problem. I have the following html structure:

<body ng-app='myApp'>
      <div ng-controller='myCtrl'> 
        <select ng-model='selectedOption'
                ng-options='option.size for option in options'
                ng-change='update(selectedOption)'></select>
      </div>

      <div ng-controller='myCtrl'>
        <ul>
          <li ng-repeat='asset in assets'>
            {{asset}}
          </li>
        </ul>
      </div>
   </body>

Notice that i have 2 controllers that have the same name 'myCtrl'.

And the following is my javascript code:

var myApp = angular.module('myApp', []);

myApp.factory('Assets', function() {
  return {
    assets: [{test:1}]
  };
});

myApp.controller('myCtrl', function($scope, Assets, $rootScope) {

  $scope.assets = Assets.assets;

  var temp = [
    {test:5},
    {test:6},
    {test:7}
  ];

  $scope.options = [
    {size: 1},
    {size: 2},
    {size: 3},
    {size: 4}
  ];
  $scope.selectedOption = $scope.options[0];

  $scope.update = function(value) {

    console.log($scope.$id);

    /*for(var i = 1; i < value.size; i=i+value.size) {
      $scope.assets.push({
        test: value.size
      });
    }*/

    $scope.assets = temp;
  };

});

When I run the code and select a option from the dropdown list, console will log '003' which is the first controller's $id. Why inside the 'update' function I can't get the second controller's scope? Is there a way to get it?

Here is a link to JSbin: http://jsbin.com/gecizuwaku/2/edit?html,js,console,output

GregL · Accepted Answer · 2014-10-22 22:20:39Z

3

You could, but you would need to invoke the update() function inside the second ng-controller="myCtrl" block.

The way ng-controller roughly works is that it creates a child scope of the scope of the element it is on. Then it instantiates the controller function, resolving any dependencies and passing them in, along with this new child scope as $scope. That means each ng-controller instance will create a new instance of the controller function with a new child scope supplied.

In your specific case, the two scopes created by ng-controller will be siblings.

You could see the second scope's $id by running the following in the developer console:

angular.element('ul').scope().$id

Or by invoking the update() method:

angular.element('ul').scope().update()

which would log the $id to the console. It will likely be the next sequential id, which in your case will be "004".

answered Oct 22, 2014 at 22:20

GregL

38.2k8 gold badges65 silver badges68 bronze badges

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

2 Comments

user2730490 Over a year ago

Great, i got it now. Thanks.

GregL Over a year ago

Awesome! Don't forget to accept the answer then (click the tick icon below the answer voting controls) and upvote it if it was helpful for you. And welcome to StackOverflow! :-)

Collectives™ on Stack Overflow

Understanding Angularjs scope

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related