AngularJS : $scope.$watch is not updating value fetched from $resource on custom directive

The issue is that watch compares the reference instead of the object by default. Add ,true to the end to have it compare the value instead.

scope.$watch('seats', function(newval, oldval){                console.log(newval, oldval);                updateSeatInfo(scope,element);            }, true);

I had this problem too. It was due to the fact that my variable was at first not defined 'undefined' in the scope. Watch seems to not work on undefined variables. Seems obvious after-all.

I was first trying to use watch to trigger when my variable would be effectively set by the controller. Example:

myApp.controller('Tree', function($scope, Tree) {Tree.get({},function(data) { // SUCCESS    console.log("call api Tree.get succeed");    $scope.treeData = data;},function(data) { // FAILURE    console.log("call api Tree.get failed");    $scope.treeData = {};});});

I solved it by initializing my variable with an empty object before calling the service:

myApp.controller('Tree', function($scope, Tree) {$scope.treeData = {};      // HERETree.get({},function(data) { // SUCCESS    console.log("call api Tree.get succeed");    $scope.treeData = data;},function(data) { // FAILURE    console.log("call api Tree.get failed");    $scope.treeData = {};});});

In that case watch was able to detect the change in the variable.

I can't see that you're using the SeatsCtrl-controller anywhere? How is it being used? And have you verified that it is activated, and that the query is actually performed?

The quickest way to check if SeatsCtrl is in use is to simply add a console.log('SeatsCtrl actived!'); inside it. If it is not, then add ng-controller="SeatsCtrl" to the div.

You can also put a watch-and-log on the seats directly inside the controller just to make sure it is not an issue with scoping.