Keep variables in different controllers synchronized in AngularJS

Question

In controller, I'm running an interval and showing the variable value on the view counting up:

$scope.value = 0;
var $higherScope = $scope;


interval = $interval(function () {

    $scope.value++; 

}, 1000);

Now I'm opening a modal, where I also want to show this variable counting up:

$modal.open({
        templateUrl: 'modal.html',
        backdrop: true,
        windowClass: 'modal',
        controller: function ($scope, $modalInstance) {

            $scope.value = $higherScope.value;

        }
    });

When I'm doing it like this, the variable is not shown synchronously to the original var in the upper $scope, but just the state of the variable when I opened the modal.

How can I achieve showing the same in the modal as in the upper controller, i.e. counting up live?

itamar · Accepted Answer · 2017-07-12 14:00:18Z

2

One way is to have your value in a service that is injected to both your controllers.

EDIT:

A simplified example using $interval (just as OP does) in SomeController to update the value shown in AnotherController's view.

Hope this is more clear: http://plnkr.co/edit/UqZ7tUHTPXnjeBP8j4qF?p=preview

app.js:

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

// For siplicity I put two controllers and a service/factory in this same file.
// IRL you everything should have its own file ;-)


app.factory('valueService', function($interval) {
  var service = {
    value: 0,
  };

  return service;
});



app.controller('SomeController', function($scope, $interval, valueService) {
  $scope.name = 'Some Controller';

  start();      // this line will execute when constructor initiates, starting the whole thing.

  function start() {
    $interval(function(){
      valueService.value++;   // this ctrl increments a value of the shared service (that the other controller uses to update its view)
    }, 1000);
  }
});


app.controller('AnotherController', function($scope, valueService) {
  $scope.name = 'Another Controller';
  $scope.valueService = valueService;
});

index.html:

<!DOCTYPE html>
<html ng-app="plunker">

<head>
  <meta charset="utf-8" />
  <title>AngularJS Plunker</title>
  <script>
    document.write('<base href="' + document.location + '" />');
  </script>

  <script data-require="[email protected]" src="https://code.angularjs.org/1.3.13/angular.js" data-semver="1.3.13"></script>
  <script src="app.js"></script>

</head>

<body>
  <div ng-controller="SomeController">
    <p>{{name}}</p>
  </div>
<hr/>

  <div ng-controller="AnotherController">
    <p>{{name}}</p>
    <p>{{valueService.value}}</p>
  </div>
</body>

</html>

edited Jul 12, 2017 at 14:00

itamar

3,9775 gold badges37 silver badges61 bronze badges

answered Jul 9, 2015 at 15:33

wojjas

1,0961 gold badge10 silver badges22 bronze badges

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

6 Comments

user4878548 Over a year ago

I dont get it. Can you show me this one very short for my case? Counting up a variable lying in a factory in the one controller and having it synchronized in the other controller?

wojjas Over a year ago

I hope my new plunker example helps. There are other ways to go about this, like nested scope. If the two controllers are in the same parent-scope on which the variable "value" is, then both can change and see the changes of the parent-scope's "value". That's just a different strategy, choose whatever suits best.

user4878548 Over a year ago

Thanks, that really helped me. Two questions: 1) How can I use the second alternative to make both controllers in the same parent-scope? Do I have to use a new controller then, where both lie in? 2) Your ex. works fine for me. In my case, I have an array inside the service. Setting the values of the array like valueService.value[0] = data[0] for every index works fine for me, but valueService.value = data doesn't work. Why?

wojjas Over a year ago

1) You nest the controllers in your view, in the *.html file. Yes you will need a ParentController, ChildAController and ChildBController. 2) If you set the whole array it won't work, but setting each individual element works. That has to do with how binding works (by binding I mean angulars Controller-View magic updater). Most likely changing the whole array won't make binding react, I'm guessing you are using ng-repeat in your view. Can you see valueService.value.length updated in view? Or show me more code if this is important for you.

wojjas Over a year ago

Hmm... @testiguy, I'm glad I could help. Now you asked two questions in a comment. This makes it difficult for me to answer. If I answer in comment I can't format code, can't get reputation if you like my answer, it's not clear to others etc. If I "Add Another Answer" and answer a question in comment... It will be confusing to others thinking its an answer to the main Question and they will down-vote me for irrelevance or something. Create a new answer. Paste url to it in comment and mention me so I can answer that for you on that separate case.

|

Collectives™ on Stack Overflow

Keep variables in different controllers synchronized in AngularJS

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related