title: Angularjs watch ng-model change in different controllers
body: <p>i try to share data between two different controllers using a service and watch changes but i don't find how to do this. Here is my code</p>
  
  <p>month-select.component.js:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>'use strict'
  
  angular
  .module('myApp.monthSelect')
  
  .component('myApp.monthSelect', {
    templateUrl: 'monthSelect/month-select.template.html',
    controller: 'MonthSelectCtrl',
    css: 'monthSelect/month-select.style.css'
  })
  
  .controller('MonthSelectCtrl', ['$scope', 'selectedMonthSvc', function ($scope, selectedMonthSvc) {
    selectedMonthSvc.setDate($scope.dt)
  
  }])</code></pre>
  </div>
  </div>
  </p>
  
  <p>weeks-list.component.js:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>'use strict'
  
  angular
  .module('myApp.weeksList')
  
  .component('myApp.weeksList', {
    templateUrl: 'weeksList/weeks-list.template.html',
    controller: 'WeeksListCtrl',
    css: 'weeksList/weeks-list.style.css'
  })
  
  .controller('WeeksListCtrl', ['$scope', 'selectedMonthSvc', function ($scope, selectedMonthSvc) {
    
    $scope.getDate = selectedMonthSvc.getDate
  }])</code></pre>
  </div>
  </div>
  </p>
  
  <p>get-select-month.service.js</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>angular.module('myApp.svc', [])
  
  .factory('selectedMonthSvc', function () {
    var self = this
    var date = ''
  
    self.setDate = function (value) {
      return date = value
    }
    self.getDate = function () {
      return date
    }
    return self
  })</code></pre>
  </div>
  </div>
  </p>
  
  <p>It works at init i get the date in my WeeksList controllers, but if i change the date in my MonthSelectCtrl, the value don't update in WeekList.</p>
  
  <p>I'm trying to watch it with $watch but it don't work and have no idea where it goes wrong.</p>
  
  <p>Thank you very much for your help.</p>