title: AngularJS custom directive $watch not working
body: <p>I am creating a demo application with two controllers communicating through a service containing some data. It is a kind of contacts book. A user can edit selected person from the list.</p>
  
  <p>The data is stored in array of objects and I use a custom directive to perform some manipulations with that objects' text properties.</p>
  
  <p>The problem is that a text rendered in the list using the custom directive is not updated on model change (when typing something in name fields) while a text that is placed using {{}} changes while typing.</p>
  
  <p>Here is a sample showing a problem:</p>
  
  <p>js</p>
  
  <pre class="lang-js prettyprint-override"><code>var contacts = angular.module('contacts', []);
  
  contacts.service('database', ['$rootScope', function ($rootScope) {
    return {
      db : [
      {person:{fName:"John", lName:"Williams"}, phone:"11111111111"},
      {person: {fName:"Sara", lName:"Lewis"}, phone:"222222222"},
      {person: {fName:"Lana", lName:"Watson"}, phone:"33333333333"},
      {person: {fName:"John", lName:"Smith"}, phone:"4444444444"}  
      ],  
      selectedPerson : null,
      setSelected : function (i) {
        this.selectedPerson = i;
        $rootScope.$broadcast('selected');
      }
    }
  }]);
  
   contacts.controller("listCtrl", function($scope, database) {
    $scope.list = database.db;
    $scope.getSelected = function() {
      return database.selectedPerson;
    };
    $scope.setSelected = function(i) {
      database.setSelected(i);
    }; 
  });
  
  contacts.controller("editorCtrl", function($scope, database) {
    $scope.editing = database.selectedPerson;
    $scope.$on('selected', function(event) {
      $scope.editing = database.selectedPerson;
    });
  });
  
  contacts.directive('personName', function() {
    return {
      restrict: 'AEC',
      scope:{
        personName: '='
      },
      link: function(scope, elem, attrs) {
        scope.$watch(function(){return scope.personName;}, function(obj) {
          var fullName = obj.fName + " " + obj.lName;
          elem.text(fullName);
        });
      }
    };
  });
  </code></pre>
  
  <p>html</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;div ng-app="contacts"&gt;
    &lt;div class='list' ng-controller="listCtrl"&gt;
      &lt;div ng-repeat="i in list"
        ng-click="$parent.setSelected(i)"
        ng-class="{'sel': ($parent.getSelected() === i)}"&gt;
        &lt;span person-name="i.person"&gt;&lt;/span&gt;, {{i.phone}}
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class='edit'  ng-controller="editorCtrl"&gt;
      First name: &lt;input type="text" ng-model='editing.person.fName'&gt; &lt;br&gt;
      Last name: &lt;input type="text"  ng-model='editing.person.lName'&gt; &lt;br&gt;
      Phone: &lt;input type="text"  ng-model='editing.phone'&gt; &lt;br&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Working demo: <a href="http://cssdeck.com/labs/ejnhuqf9">http://cssdeck.com/labs/ejnhuqf9</a> </p>
  
  <p>Maybe the problem is with $watch, but everything seems to be ok. Any suggestions? </p>
  
  <p>P.S. In real app I need to use the directive to do more complex text manipulation than just concatenation.</p>