ng-model across multiple controllers or views

Question

Imagine my navbar is on navbar controller and I'm doing something value manipulation in another controller, how I'm able to update the value of my navbar?

Here's a small example I created to express my problem

http://jsfiddle.net/zmw43zdp/

<div ng-app="app">
    <div ng-controller="ctrl">
        {{number}}
        <br><button ng-click="increment()">Increment</button>
    </div>

    <br>
    <br>

    <div ng-controller="ctrl2">
        {{number || 0}} 
    </div>
</div>

angular.module("app", [])
.controller("ctrl", ["$scope", function($scope){
    $scope.number = 1;
    $scope.increment = function(){
        $scope.number++;
    }
}])

.controller("ctrl2", ["$scope", function($scope){

}]);

I want to update the {{number}} of ctrl2 controller.

score 0 · Answer 1 · answered Apr 12 '16 at 05:02

So you want to share members in your controllers. Actually there are different way to achieve this but I would suggest create a parent controller as follows :

angular.module("app", [])
.controller("parent", ["$scope", function($scope){
 $scope.number = 0; 
}]
.controller("ctrl", ["$scope", function($scope){
    $scope.number = 1;
    $scope.increment = function(){
        $scope.number++;
    }
}])

.controller("ctrl2", ["$scope", function($scope){
   $scope.number= 1;
}]);

and in html:

<div ng-app="app" ng-controller="parent">
    <div ng-controller="ctrl">
        {{number}}
        <br><button ng-click="increment()">Increment</button>
    </div>

    <br>
    <br>

    <div ng-controller="ctrl2">
        {{number || 0}} 
    </div>
</div>

This is a neat and clean way I believe.

hmm parent scope. the limitation is that i will have so many parent later. is there any other alternative? imagine i have 5 pages and have user access control, I will have to use multiple parent scope which i think is ugly. — Thian Kian Phin, Apr 12 '16 at 05:07

score 0 · Accepted Answer · answered Apr 12 '16 at 05:27

The clean way of share data between is always using Angular Service. Here is the code I changed based on you example. basically

you save the really data you want to share in the Service instance
which is singleton then you make setter and getter and the increment function in the Service.
And you remove the local $scope.number from both controller.
There is no way for you to bind the data in controller to the data in Service, but you can bind the getter method to $scope, so that you can call the getter method in you view.

angular.module("app", [])
  .factory("sharedModelService", function() {
    var model = this;
    var number = 0;

    model.initNumber = function(value) {
     return number = value;
    }
    
    model.getNumber = function() {
      return number;
    }

    model.increment = function() {
      return ++number;
    }

    return model;
  })
  .controller("ctrl", ["$scope", "sharedModelService", function($scope, sharedModelService) {
    sharedModelService.initNumber(1);
    $scope.getNumber = sharedModelService.getNumber;
    $scope.increment = function() {
      sharedModelService.increment();
    }
  }])

.controller("ctrl2", ["$scope", "sharedModelService", function($scope, sharedModelService) {
    $scope.getNumber = sharedModelService.getNumber;
}]);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app">
  <div ng-controller="ctrl">
    {{getNumber()}}
    <br>
    <button ng-click="increment()">Increment</button>
  </div>

  <br>
  <br>

  <div ng-controller="ctrl2">
    {{getNumber() || 0}}
  </div>
</div>

u don't have to use $watch? – Thian Kian Phin Apr 12 '16 at 07:24 — Thian Kian Phin, Apr 12 '16 at 07:24

ng-model across multiple controllers or views

2 Answers2