title: How to watch a primitive service variable in controller with AngularJS?
body: <p>I'm trying to use $watch for it. The $watch body firing at page initialization (with undefined in newValue) and not firing at "btnChangeIsLoggedIn" click.</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html data-ng-app="myApp"&gt;
  &lt;head&gt;&lt;title&gt;title&lt;/title&gt;&lt;/head&gt;
  &lt;body&gt;
      &lt;script src="lib/angular/angular.js"&gt;&lt;/script&gt;
  
      &lt;div ng-controller="ctrl1"&gt;
          &lt;input type="text" ng-model="isLoggedIn" /&gt;
          &lt;input type="button" id="btnChangeIsLoggedIn" 
              value="change logged in" ng-click="change()" /&gt;
      &lt;/div&gt;
  
      &lt;script&gt;
          var myApp = angular.module('myApp', []);
  
          myApp.service('authService', function () {
              this.isLoggedIn = false;
          });
  
          myApp.controller('ctrl1', function ($scope, authService) {
              $scope.isLoggedIn = authService.isLoggedIn;
  
              $scope.$watch("authService.isLoggedIn", function (newValue) {
                  alert("isLoggedIn changed to " + newValue);
              }, true);
  
              $scope.change = function() {
                  authService.isLoggedIn = true;
              };
          });
      &lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>What I'm doing wrong?</p>
  
  <p><strong>My code at JSFiddle:</strong>
  <a href="http://jsfiddle.net/googman/RA2j7/">http://jsfiddle.net/googman/RA2j7/</a></p>