angular controller-directive data binding - bind property inside object

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