CODEWITHSUNDEEP
angularjs
LCJ
LCJ

Reputation: 22652

How to refresh data in second controller

I have two controllers in a template. I am passing data between them using a service. However when the model value is updated using a textbox, the text is refreshed (two-way) only on the first div that uses first controller.

How to get the second div data refreshed

  1. Without using watch or ng-change
  2. With using watch

Reference:

  1. Using ng-change instead of $watch in Angular

<html>
<head>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.27/angular.min.js">
    </script>
</head>
<body ng-app="myApp">
    <div class="container" style="padding-top: 20px;">
        <div ng-controller="myController">
	   <input type="text" ng-model="valueA">
	   <p>From First: {{valueA}}</p>
        </div>
    </div>
   <div class="container" style="padding-top: 20px;">
        <div ng-controller="mySECONDController">
            <p>From Second: {{valueB}}</p>
        </div>
    </div>
    <script>

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

        //defining service
        app.service('myService', function () {
            this.name = '';
            this.setName = function (newName) 
	    {
                this.name = newName;
            };
	    this.getName = function () 
	    {
                return this.name;
            };
        }
	);
        


        //defining controller
        app.controller('myController', function ($scope, myService) {
            
	    myService.setName("Lijo");
	    $scope.valueA = myService.getName();
           
        });

	//defining controller
        app.controller('mySECONDController', function ($scope, myService) {
            
	    $scope.valueB = myService.getName();
           
        });
	


    </script>
</body>
</html>

Upvotes: 1

Views: 59

Answers (1)

adolfosrs
adolfosrs

Reputation: 9389

What you can do is set the value to the service in the first controller and get it using the service in the second one. So it will be always reffering to the value that is stored in the Service.

<html>
<head>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.27/angular.min.js">
    </script>
</head>
<body ng-app="myApp">
    <div class="container" style="padding-top: 20px;">
        <div ng-controller="myController">
	   <input type="text" ng-model="valueA" ng-change="myService.setName(valueA)">
	   <p>From First: {{myService.getName()}}</p>
        </div>
    </div>
   <div class="container" style="padding-top: 20px;">
        <div ng-controller="mySECONDController">
            <p>From Second: {{myService.getName()}}</p>
        </div>
    </div>
    <script>

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

        //defining service
        app.service('myService', function () {
            this.name = '';
            this.setName = function (newName) 
	    {
                this.name = newName;
            };
	    this.getName = function () 
	    {
                return this.name;
            };
        }
	);
        


        //defining controller
        app.controller('myController', function ($scope, myService) {
           myService.setName("Lijo");

           $scope.myService= myService;
	       $scope.valueA = myService.getName();
        });

	//defining controller
        app.controller('mySECONDController', function ($scope, myService) {      
	    $scope.myService= myService;   
        });
	


    </script>
</body>
</html>

Upvotes: 1

Related Questions