AngularJS UI-Router: Two way binding between resolved object in child/parent state—Child state won't update

Question

I have a parent state and a child state. The parent state resolves an object. Then, the child state resolves that object from the parent state.

Because the child state is resolving the object from the parent state, I would expect two-way binding to occur. And oddly, although changes from the child state (ie, adding a property), update the object in the parent state—changes in the object in the parent state are not affecting the resolved object in the child state, which surprised me.

I know that I could just $broadcast changes in the resolved object in the parent state to the child state, but I would like to understand why the resolved object in the child state is not being updated automatically.

Here's what I'm working with. Parent state:

.config(function($stateProvider) {
  $stateProvider.state('parent', {
    template:  ''
    +'  <div>Parent State</div>'
    +'    <div>Modify property on parent state, object.someProperty:'
    +'      <input ng-model="object.someProperty">'
    +'        {{object.someProperty}}'
    +'    </div>'
    +'  </div>' 
    +'  Include Child State'
    +'  <ui-view></ui-view>',
    controller: function($scope) {

      $scope.object = object;

    },
    resolve: {
       object: [function() {
         var object = '';
         object.someProperty = 'initialValue';
         return object;
       }]
    }
  })

And child state:

  .state('parent.child', {
    template: ''
    +'  <div>Child State</div>'
    +'    <div>Watch property from parent state, object.someProperty'
    +'        {{object.someProperty}}'
    +'    </div>',
    resolve: {
      objectFromParent: ['object', function(object) {
        return object;
      }]
    },
    controller: function(objectFromParent) {

      $scope.objectFromParent = objectFromParent;          
    }        
  });
});

Does the resolve in the child state only occur on instantiation? Ie.—once the child state resolves the object from the parent state, it is no longer listening for changes to the resolved object? It doesn't seem like that should be the case.

PLNKR might be bugging out—my code won't work for unknown reasons: http://plnkr.co/edit/EjV4TtSIP6HpVMG0oanL?p=preview

Any direction or insight is appreciated. Thank you!

Answer 1

All your expectations are correct. And There is a bit adjusted plunker which is working.

The most important change is making the shared object a real object (not string)

$stateProvider.state('parent', {
    url: '/parent',
    template:  ...,
    controller: function($scope, object) {        
      $scope.object = object;       
    },
    resolve: {
       object: [function() {
         //var object = '';
         var object = {};
         object.someProperty = 'initialValue';
         return object;
       }]
    }

Mostly the lines:

//var object = '';
var object = {};

This way, the $scope.object becomes a reference object. It means, that parent and child will share reference to that object. And in deed - if anyone will change that (add property, change that property) - all will know about the change... because they share reference to ONE object

Check it here