[Solved]-Return value from d3 angular directive to controller-d3.js

The behavior is really weird. I actually created a small test code, very to the point, to test this issue. If I pass complex data type like array, json or object it works fine but somehow it doesn't work with primitive datatype like number, null or string. So what i did is, i have just replaced my two variables with one data object like:

controller
========
$scope.dataModel {
    ap1: "1111"
    ap2: "2222"
}

html
=======
<d3-zones
    ng-if="vzones"
    zone-data="vzones"
    ap1-data="dataModel.ap1"
    ap2-data="dataModel.ap2">
</d3-zones>

directive
========
scope: {
 zoneData: '=zoneData',
 ap1Data: '=ap1Data',
 ap2Data: '=ap2Data'
},
And later in the link function, i am updating these two values on a particular event like this:
scope.$apply(function() {
    scope.ap1Data = somevalue;
    scope.ap2Data = somevalue;
});

and then passed this dataModel to the directive as given above. Now it works fine. Any change to this datModel is returned back to the controller.

Thank you guys for looking into it.