Change ng-repeat value using another controller

Question

I'm new to Angular JS. Here is my code

<div ng-controller="firstCtrl">
    <div  ng-repeat="city in citynames">
        <p>{{city.name}}</p>
    </div>
</div>

<div ng-controller="secondCtrl">
    <button ng-click="changethis()">Click Here</button>
</div>

var app=angular.module('mainApp',[]);
    app.controller('firstCtrl',['$scope','$http',function($scope,$http){
        $scope.citynames=[{name:'Chennai',id:'1'},
            {name:'Bangalore',id:'2'},
            {name:'Hyderabad',id:'3'},
            {name:'Coimbatore',id:'4'},
            {name:'Mysore',id:'5'},
            ];
       }]);
    app.controller('secondCtrl',['$scope','$http',function($scope,$http){
        $scope.changethis=function(){
            $scope.citynames=[{name:'Delhi',id:'1'},
            {name:'Sydney',id:'2'},
            {name:'Newyork',id:'3'},
            {name:'London',id:'4'},
            ];
        };

       }]);

I want to change first controller ng-repeat while clicking second controller ng-click event. But using this code its not changing.

sjm · Accepted Answer · 2015-11-17 12:22:01Z

2

Each controller has a separate scope, you can either use $rootScope https://docs.angularjs.org/api/ng/service/$rootScope which is a global scope or use a angular service/factory https://docs.angularjs.org/guide/services to share the scope between controllers.

edited Nov 17, 2015 at 12:22

answered Nov 17, 2015 at 12:16

sjm

5,5181 gold badge29 silver badges37 bronze badges

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

Comments

ngLover · Accepted Answer · 2015-11-17 12:17:49Z

1

Both have different scope so it is not possible in any easy manner you can use emit or broadcast method if DOM have parent child relationship between them.

or you can use $controller service .

app.controller('secondCtrl',  ['$scope','$http','$controller',function($scope,$http,$controller){
        var scopeSecond;       
    $controller("firstCtrl",{'$scope': scopeSecond})   

         $scope.changethis=function(){
                    scopeSecond.citynames=[{name:'Delhi',id:'1'},
                    {name:'Sydney',id:'2'},
                    {name:'Newyork',id:'3'},
                    {name:'London',id:'4'},
                    ];
                };

               }]);

edited Nov 17, 2015 at 12:17

answered Nov 17, 2015 at 12:15

ngLover

4,6183 gold badges24 silver badges42 bronze badges

2 Comments

saravanan mp Over a year ago

is there any way to to use factory for this

ngLover Over a year ago

ya you can use a factory

Jay Patel · Accepted Answer · 2015-11-17 12:20:55Z

You can do it like this..

    var app=angular.module('mainApp',[]);
    app.controller('firstCtrl',['$scope','$http',function($scope,$http){
        $scope.citynames=[
            {name:'Chennai',id:'1'},
            {name:'Bangalore',id:'2'},
            {name:'Hyderabad',id:'3'},
            {name:'Coimbatore',id:'4'},
            {name:'Mysore',id:'5'},
            ];

       $scope.$on("changeCities",function(){
            $scope.citynames=[{name:'Delhi',id:'1'},
               {name:'Sydney',id:'2'},
               {name:'Newyork',id:'3'},
               {name:'London',id:'4'},
            ];
       });
       }]);


    app.controller('secondCtrl',['$scope','$http',function($scope,$http){
        $scope.$broadcast("changeCities");
    }]);

David Ortiz · Accepted Answer · 2015-11-17 12:25:28Z

You can use the same controller for both the ng-repeat and the click. In this way you'll hace the same $scope and in the click just change the $scope that will automatically change your ng-repeat.

Much simpler and cleaner having the functionality in just one controller in this case.

<div ng-controller="Ctrl"> 
 <div ng-repeat="city in citynames"> 
  <p>{{city.name}}</p> 
 </div> 
 <button ng-click="changethis()">Click Here</button> 
</div> 

var app=angular.module('mainApp',[]); 
app.controller('Ctrl',['$scope','$http',function($scope,$http){  
 $scope.citynames=[{name: 
  'Chennai',id:'1'}, {name:
  'Bangalore',id:'2'}, {name:
  'Hyderabad',id:'3'}, {name:
  'Coimbatore',id:'4'}, {name:
  'Mysore',id:'5'}, ]; }]); 

 $scope.changethis=function(){
  $scope.citynames=[{name:'Delhi',id:'1'}, {name:'Sydney',id:'2'}, {name:'Newyork',id:'3'}, {name:'London',id:'4'}, ]; }; }
]);

In this approach you have one controller to "rule them all". This is great for these times that you have similar functionalities or you are working on the same variables from the same view. I really recommend one controller per view and use the factories just when you need to persist data from one view to another.

Hope it helps

aurelius · Accepted Answer · 2015-11-17 12:27:47Z

One other solution would be to use the $rootScope, but this object should not be polluted. Here you have a working example.

var app=angular.module('app',[]);
app.controller('firstCtrl',['$rootScope','$http',function($rootScope,$http){
  $rootScope.citynames=[{name:'Chennai',id:'1'},
      {name:'Bangalore',id:'2'},
      {name:'Hyderabad',id:'3'},
      {name:'Coimbatore',id:'4'},
      {name:'Mysore',id:'5'},
      ];
 }]);

app.controller('secondCtrl',['$rootScope','$http',function($rootScope,$http){
    $rootScope.changethis=function(){
        $rootScope.citynames=[{name:'Delhi',id:'1'},
          {name:'Sydney',id:'2'},
          {name:'Newyork',id:'3'},
          {name:'London',id:'4'},
        ];
    };
}]);

Collectives™ on Stack Overflow

Change ng-repeat value using another controller

5 Answers 5

Comments

2 Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

2 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related