title: $watch not called when model property changes
body: <p>I am just starting with angular and trying to understand <code>$watch</code> function in scope API. Here is a link to my JS fiddle :</p>
  
  <p><a href="http://jsfiddle.net/jforjava1981/kn40tp2x/34/" rel="nofollow">JS Fiddle Watch demo Not working</a> </p>
  
  <pre><code>var myApp = angular.module('myApp1', []);
  angular.element(document).ready(function() {
           angular.bootstrap(document, ['myApp1']);    
  });
  function MyController($scope){
           var mc = this;
           mc.focus = {
              'name' :false,
              'email':false
             };
  
     $scope.$watch(mc.focus,function(oldVal,newVal){
       console.log(oldVal);
       console.log(newVal);
      },false);
      mc.allFilled = false;
      mc.setFocus = function(prop) {
         mc.focus[prop] = true;
      };
  };    
  myApp.controller("MyController",MyController);
  </code></pre>
  
  <p>What I want to do :</p>
  
  <p>1) I have 4 inputs have included just one in above link for brevity and demo.</p>
  
  <p>2) each of the inputs has corresponding keys in focus object with initial values as false.</p>
  
  <p>3) I will be changing the  property value to true in focus object  whenever appropriate input element is focused using <code>setFocus()</code> function</p>
  
  <p>4) as soon as all properties in focus object have truthy values I want to change <code>allFilled</code> property to true.</p>
  
  <p>What I am trying to do here :
  For achieving what I want to do I am watching focus object and in the listener I will be checking if all properties have value true. If yes I will change the allFilled property/or do other stuff as well.</p>
  
  <p>I know maybe I can execute above logic in <code>setFocus()</code> itself but want to try <code>$watch</code>.<br>
   1)Is it possible doing this using <code>$watch</code>?<br>
   2) Why my <code>$watch</code> is not called?<br>
   3)What is the best way to do this in Angular?</p>