title: watching controllers scope from angular directive
body: <p>I am passing data from a controller, into a directive.  The controller is changing the data, however I can not get the directive to respond when the data in the controller changes.  Here is a link to JSFiddle: <a href="http://jsfiddle.net/mcardleliam/ReJQq/1/" rel="nofollow">http://jsfiddle.net/mcardleliam/ReJQq/1/</a>. </p>
  
  <p>My html looks like this: </p>
  
  <pre><code>&lt;div ng-app="app" ng-controller="appCtrl"&gt;
    &lt;h1 foo&gt;Prop: {{prop}}&lt;/h1&gt;
  &lt;/div&gt;
  
  angular.module('app', [])
  .controller('appCtrl', function($scope, $timeout) {
    $scope.prop = 0;
    var f = function() {
        $scope.prop = $scope.prop += 1;
        $timeout(f, 1000);
    }
    f();
  
  })
  .directive('foo', function() {
    return {
        restrict: 'A',
        link: function(scope) {
          console.log('initial prop', scope.prop);
          scope.$watch(scope.prop, function() {
             console.log("prop changed"); 
          });
        }
    };
  });
  </code></pre>
  
  <p>The "console.log("prop changed");" should be called every time the controllers $scope.prop property changes, but it is not.  Anyone know what I am doing wrong?</p>