Angularjs synchronize the value in different part but under same module same controller

Question

How to synchronize $scope.department in 2 controllers. no matter I enter the value in which input, the $scope.department still can update base on the input field. example

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

    app.controller('GreetCtrl', function($scope) {
    $scope.department= "HR department";

  });

HTML
<body ng-app="app">
  <div class="show-scope-demo">
    <div ng-controller="GreetCtrl">
      <input type="text" ng-model="department">
      {{department}}
    </div>

    <div ng-controller="GreetCtrl">
     <input type="text" ng-model="department">
     {{department}}
    </div>
  </div>
</body>

@NidhishKrishnan: I think you miss understood my question, but anyway thank for giving me a respond. Actually what I want is the $scope.department can be update in both controller at the same time. — Henry
– Henry, Commented Apr 22, 2014 at 6:18

Nidhish Krishnan · Accepted Answer · 2014-04-22 05:34:19Z

You can create a constant in Angular JS like this.

So Department will always contains "HR department".

var app = angular.module('app', []);
app.constant("Department", "HR department");
app.controller('GreetCtrl', function ($scope, Department) {
    $scope.department = Department;

});

But you should do something like the below to acheive the scenerio which you have metioned

Working Demo

html

<div class="show-scope-demo">
    <div ng-controller="GreetCtrl">
        <input type="text" ng-model="department" ng-change="preventChange()">{{department}}</div>
    <div ng-controller="GreetCtrl">
        <input type="text" ng-model="department" ng-change="preventChange()">{{department}}</div>
</div>

script

var app = angular.module('app', []);
app.constant("Department", "HR department");
app.controller('GreetCtrl', function ($scope, Department) {
    $scope.department = Department;
    $scope.preventChange = function () {
        $scope.department = Department;
    }
});

Community · Accepted Answer · 2017-05-23 12:05:09Z

0

If you want to share the variable between the controllers then use $rootScope.

assign $rootScope.department = "somehting".

Please refer the below question..

Sharing scope between controller & directive in AngularJS

edited May 23, 2017 at 12:05

CommunityBot

11 silver badge

answered Apr 22, 2014 at 6:48

Madhu

2,5513 gold badges21 silver badges34 bronze badges

1 Comment

Henry Over a year ago

I had tried, but it cannot work. example

Collectives™ on Stack Overflow

Angularjs synchronize the value in different part but under same module same controller

2 Answers 2

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related