title: scope.$watch in a directive isn't being called after AJAX request
body: <p>I have the following directive:</p>
  
  <pre><code>MyApp.directive('myFilter', ['$filter','$rootScope',
  function($filter, $rootScope)
  {
      var dir = {};
      dir.restrict = 'E';
      dir.templateUrl = 'views/myFilter.html';
      dir.replace = true;
      dir.scope = 
          {
              name: '@',
              model: '=',
          };
  
      dir.link = function(scope,el,attrs)
      {        
          //stuff here
      }
  
  
      return dir; 
  }]);
  </code></pre>
  
  <p>Here's how I invoke it:</p>
  
  <pre><code>&lt;my-filter model="someField" name="abcd" /&gt;
  </code></pre>
  
  <p>When the directive is first initalized, the <code>someField</code> is empty. Later on, it is retrieved via ajax, and its value is filled in.</p>
  
  <p>Question is, how can I watch for the value of <code>someField</code> to be updated? When I do this from the link method:</p>
  
  <pre><code>scope.$watch(scope.model, function()
  {
     console.log( "changed, new val: ", scope.model );
  }
  </code></pre>
  
  <p>This is only called once, when initalizing the directive, and the value then is empty. When the value is retrieved via ajax (from <code>$http.get</code>), this watch function is not called again. However, in other parts of the page where I'm displaying <code>{{someField}}</code>, that value DOES update when ajax request is fetched. So I don't think the problem has to do with doing <code>$scope.apply()</code> after ajax request.</p>
  
  <p><strong>Edit:</strong> <code>someField</code> is assigned in the controller. Here is the code:</p>
  
  <pre><code>MyApp.controller('myCtrl', 
  ['$scope', '$rootScope', '$routeParams', 
  'ajax', '$filter',
  
  function($scope, $rootScope, $routeParams, ajax, $filter)
  {
      var userId = parseInt( $routeParams.userId );        
      $scope.loaded = false;
      $scope.someField = ""; //initalize with empty value
  
      var load = function(data)
      {
          $scope.loaded = true;
          $scope.someField = data.someField;            
      };        
  
      ajax.getUser(userId).success(load);               
  }
  ]);
  </code></pre>
  
  <p>The method <code>ajax.getUser()</code> does a <code>$http.get()</code> and returns its <code>promise</code>. In the code above, the <code>load</code> method is called which sets the value of <code>someField</code>.</p>