AngularJS directive $scope.$watch for two way binding doesn't working

Question

I am trying to detect changes on two way binding scope in AngularJS (1.7.2) directive.

// pagination.js (directive)
app.directive("pagination", ($rootScope) => {
  return {
    templateUrl: "/shared/filters/pagination/pagination.html",
    scope: {
      filter: "="
    },
    link: function($scope, element, attrs) {

      $scope.$watch("filter", value => {
        console.log(value); // first time works, later it's undefined
      });

    }
  }
});

// parent.html 
<pagination filter="filter"></pagination>

// parent.js 
$scope.filter = {
  status: "All"
};

The $scope.filter is getting changed via function, which also locate in the parent.js file:

$scope.someFunction = () => {
  $scope.filter.status = "Pending";
  // this should fire the $scope.$watch event in the pagination.js (directive)
  // however this doesn't get applied
};

How to make the scope to be listened to changes that are coming from other directives?

Answer 1

Use a deeper watch depth:

  $scope.$watch("filter", value => {
      console.log(value); // first time works, later it's undefined
  ̶}̶)̶;̶̶
  }, true);

For information, see AngularJS Developer Guide - $scope Watch Depths.