AngularJS : changing the object not triggered in `$watch` method

Question

As a basic i am keeping a object with some default values. once i am fetching the value from the server, i am updating the object. when i am updating that's not triggering to the $watch method. i any one help me know the reason here?

my controller.js :

$scope.graphInfo = {"ActualPercentage" : 30, "Type" : "Mechanical" };
        // default sets

        $scope.conractorInfo = function ( contractor ) {

            $location.search('id', contractor.Id);

            server.contractor.get({id:$routeParams.id, contid:contractor.Id}).$promise.then(function (data) {

                $scope.contractor = data;
                $scope.graphInfo.ActualPercentage = Number($scope.contractor.ActualPercentage);
                $scope.graphInfo.Type = $scope.contractor.Type;
                //updating object
            });

        }

my template with directive :

    <plan-vs-actual data="graphInfo"></plan-vs-actual>

//getting graph info.

my directive :

    var planVsActual = function ($timeout) {

        return {

            replace : true,

            scope : {

                data : '='
            },

            template : "<div id='pieGraph'></div>",

            link : function ( scope, element, attr ) {


                var width = element.width(), 
                height = element.height(),
                radius = Math.min(width, height) / 1.2;

                var color = d3.scale.ordinal().range(["#ffff00", "#1ebfc5"]);

                var pie = d3.layout.pie().sort(null).value(function(d) { return d });

                var arc = d3.svg.arc().outerRadius(radius - 90).innerRadius(radius - 85);

                var svg = d3.select("#pieGraph").append("svg").attr("width", width).attr("height", height)
                         .append("g").attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");

                scope.$watch ('data', function ( newValue, oldvalue ) {

                    console.log( newValue );
//after i am updating using server values, not updating here.

                });
    }
    }
    }

possible duplicate of [$watch an object in angular](http://stackoverflow.com/questions/19455501/watch-an-object-in-angular) — dting, Jul 25 '15 at 11:00

score 1 · Accepted Answer · answered Jul 25 '15 at 10:57

Set the 3rd argument of $watch to true

modify like,

scope.$watch ('data', function ( newValue, oldvalue ) {

    console.log( newValue );

 }, true);

// put true to watching properties

3rd argument is the objectEquality it will Compare for object equality using angular.equals instead of comparing for reference equality.

here is the DOC

not sure just give a try.

AngularJS : changing the object not triggered in `$watch` method

1 Answers1