Angular - Sharing between 2 controllers

This fiddle shows how to share a view model through 2 controllers

by douglasloyo

HTML

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<div ng-app="myApp">
<div ng-controller="firstController as vm">
    Second Controller Filter Value:<span>{{vm.filter.prop1}}</span>
</div>
<hr>
<div ng-controller="secondController as vm">
    Fitler: <input type="number" ng-model="vm.filter.prop1" /><br/>
</div>
</div>

CSS

body{
  color: white;
}

JavaScript

/* Application */
var myApp = angular.module('myApp', []);

myApp.controller('firstController', function ($scope, filterViewModel) {
	var vm = this;
  vm.filter = filterViewModel;
  
  // Watch added to trigger events like updating charts or something.
  $scope.$watch('vm.filter', function(newVal, oldVal){
    console.log('changed new:' + newVal + ' old:' + oldVal);
	}, true);

});

myApp.controller('secondController', function ($scope, filterViewModel) {
  var vm = this;
	vm.filter = filterViewModel;
});

myApp.factory('filterViewModel', function(){
  return { prop1: 23 };
});