title: angularjs watch for change in scope variable made from another controller
body: <p>I have the following service</p>
  
  <pre><code>function PathFactory() {
      this.path = null;
      this.setPath = function(path) {
          this.path = path;
      }
      return this;
  }
  </code></pre>
  
  <p>My navigation controller: </p>
  
  <pre><code>function NavController($scope, PathFactory) {
  
      list = document.getElementsByTagName("ul");
      list = list[0];
  
      var items = list.getElementsByTagName("li");
      for(var i = 0 ; i &lt; items.length ; i++) {
          items[i].setAttribute("navIndex", i);
          items[i].addEventListener("click", navClick);
      }
  
      function navClick(e) {
          switch(e.path[1].hash) {
              case "#home":
                  PathFactory.setPath("home");
                  break;
              case "#bots":
                  PathFactory.setPath("bots");
                  break;
              case "#servers":
                  PathFactory.setPath("servers");
                  break;
              case "#status":
                  PathFactory.setPath("status");
                  break;
          }
      }
  }
  </code></pre>
  
  <p>And my content controller:</p>
  
  <pre><code>function ContentController($scope, PathFactory) {
  
      $scope.$watch(function() {
          return PathFactory.path;
      }, function (newValue) {
          alert("changed value");
      });
  
  }
  </code></pre>
  
  <p>The $scope.$watch isn't running the function should the value of PathFactory.path be changed by the navigation controller, any way I can get this setup working?</p>
  
  <p>Cheers guys.</p>