Angular directive not picking up service data

Question

My service NavData

angular.module('navData', []).
    factory('NavData', function() {
        var navData = {};
        navData.depth = 0;
        navData.category_id = "";
        navData.category_name = "";
        navData.subcategory_id = "";
        navData.subcategory_name = "";
        return navData;
    });

receives values from ui-router on some pages:

  var category = { 
    name: 'category',
    parent: site,
    url: '/categories/:category_id',
    onEnter: function(NavData, $stateParams){
      NavData.depth = 1;
      NavData.category_id = $stateParams.category_id;
      console.log(NavData);         
    },
    views: {
      'navigation': {
      templateUrl: 'partials/category-menu.html'
      },
      'content': {
      templateUrl: 'partials/category-images.html'
      }
    }
  };

A directive, appearing on all pages, should watch for changes in the service and reflect them in a custom breadcrumb function:

  .directive('breadcrumb', ['NavData', function(NavData){
    return {
      templateUrl: 'partials/breadcrumb.html',
      link: function(scope, elm, attrs, ctrl){
        scope.depth            = NavData.depth;
        scope.category_id      = NavData.category_id;
        scope.category_name    = NavData.category_name;
        scope.subcategory_name = NavData.subcategory_name;

        var doStuff = function(navdata){
          console.log("watching depth: " + navdata.depth);
          console.log("watching cat_id: "+ navdata.category_id);
        };
        scope.$watch(NavData.depth, doStuff(NavData), true);
        scope.$watch(NavData.category_id, doStuff(NavData), true);
      }

    };
  }])

However, scope.$watch seems not to work. This is my log:

watching depth: 0 directives.js:28
watching cat_id:  directives.js:29
watching depth: 0 directives.js:28
watching cat_id:  directives.js:29
Object {depth: 1, category_id: "1", category_name: "", subcategory_id: "", subcategory_name: ""} app.js:25

What am I doing wrong?

Answer 1

Your first error is in the scope.$watch() 1st argument: It is either an expression (string) evaluated in the given scope, or a function returning a value; the value is stored and the function is run on every digest cycle; if the new value is different, the listener (2nd argument) is triggered.

So the first correction is:

scope.$watch(function() {
    return NavData.depth,
}, .../*other arguments, see below*/);

Now the 2nd argument is wrong as well! It is expected to be a function, you are providing the returned value of a function (which, by the way, is undefined for doStuff). This 2nd argument function receives the new value (as returned by the 1st argument above), the old value and the scope. In your case you don't care about the new/old value. So the complete solution should be:

scope.$watch(function() { // decide the watched value
    return NavData.depth,
}, function() { // what to do when the value changes
    // do stuff and reference NavData normally
});