Vfrdtyky

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?

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.