angular controller-directive data binding - bind property inside object - angularjs

Question

I have two properties in my scope name and city.
If I change city, it reflects in directive. But when I change name, it is not reflecting in directive. I have intentionally passed name from obj object because I am trying to achieve data binding inside object.
Can some one please help how to bind property inside a object, so that the data binding still works.
I think this is where something must be wrong
$scope.obj = { prop: $scope.name };
var myApp = angular.module('myApp',[]);
myApp.directive('passObject', function() {
return {
restrict: 'E',
scope: { obj: '=', city: "=" },
template: '<div>Hello, {{obj.prop}}! from {{city}}</div>'
};
});
myApp.controller('MyCtrl', function ($scope) {
$scope.name="manu";
$scope.city = "hyderabad";
$scope.obj = { prop: $scope.name };
});
<div ng-controller="MyCtrl">
<h3>
Name: <input ng-model="name"/>
</h3>
<h3>
City: <input ng-model="city"/>
</h3>
<pass-object obj="obj" city="city"></pass-object>
</div>

Answer 1

I took your code and added a $scope.$watch to it to update the model $scope.obj on change of $scope.name, works fine now.
`
var myApp = angular.module('myApp',[]);
myApp.directive('passObject', function() {
return {
restrict: 'E',
scope: { obj: '=', city: "=" },
template: '<div>Hello, {{obj.prop}}! from {{city}}</div>'
};
});
myApp.controller('MyCtrl', function ($scope) {
$scope.name="manu";
$scope.city = "hyderabad";
$scope.obj = { prop: $scope.name };
$scope.$watch(
function(){
return $scope.name;
},
function(newVal,oldVal){
$scope.obj.prop = $scope.name;
},
true
);
});
`

Answer 2

Your $scope.obj.prop is binding to a string on another object namely $scope
Your directive will not be notified of the change as the two way binding needs to be done on the property itself.
Example:
var myApp = angular.module('application',[]);
myApp.directive('passObject', function() {
return {
restrict: 'E',
scope: { name: '=', city: "=" },
template: '<div>Hello, {{name}}! from {{city}}</div>'
};
});
myApp.controller('MyCtrl', function ($scope) {
$scope.name="manu";
$scope.city = "hyderabad";
});
<div ng-controller="MyCtrl">
<h3>
Name: <input ng-model="name"/>
</h3>
<h3>
City: <input ng-model="city"/>
</h3>
<pass-object name="name" city="city"></pass-object>
</div>
If you really want to use your structure you can use $watch as Pramit Kundu showed in his answer, OR you can use a function to get the value.
Example 2
var myApp = angular.module('application',[]);
myApp.directive('passObject', function() {
return {
restrict: 'E',
scope: { obj: '=', city: "=" },
template: '<div>Hello, {{obj.prop()}}! from {{city}}</div>'
};
});
myApp.controller('MyCtrl', function ($scope) {
$scope.name="manu";
$scope.city = "hyderabad";
$scope.obj = { prop: function(){ return $scope.name; } };
});
<div ng-controller="MyCtrl">
<h3>
Name: <input ng-model="name"/>
</h3>
<h3>
City: <input ng-model="city"/>
</h3>
<pass-object obj="obj" city="city"></pass-object>
</div>
I think we tend to use $scope.$watch when we are not supposed to seeing that we can overcome the issue by binding correctly to scope or to use a function