AngularJS - Resolved data doesn't refresh in nested state components

Question

I'm using AngularJS 1.5, ui-router, and angular-resource and I am developing a component-based application. I have one parent state, which is used for getting and updating data, this data is bound to multiple child states via a parent state resolver.

When I change the data manually in the parent component controller (e.g. vm.town.x = 666), everything works fine and the change is visible in the child state components. However, when I change data in the parent component controller from the response of the rest service (using angular-resource), the data change is visible only in the parent state component.

state definition:

.state('town', {
  url: '/my-towns/:townId/',
  component: 'town',
  bindings: {
    town: 'townData'
  },
  resolve: {
    townData: function(Town, $stateParams) {
      return Town.get({
        townId: $stateParams.townId
      });
    }
  }
})

.state('town.detail', {
  url: 'detail',
  component: 'townDetail',
  bindings: {
    town: 'townData'
  }
})

parent (town) component controller definition:

function TownCmpController(TownServices,Town,BuildingUpgradeRest) {
  var vm = this;
  this.upgradeBuilding = function(data) {
     vm.town = BuildingUpgradeRest.update({townId:  vm.town.TownId,buildingId: data.building.BuildingId});
}

rest service definition:

.factory('BuildingUpgradeRest',function($resource){
    return   $resource('api/public/v1/myaccount/towns/:townId/buildings/:buildingId/upgrade', {townId:'@townId', buildingId: '@buildingId'}, {
    'update': {
      method: 'PUT'
      }
    });
  })

'town' object binding is same in both components

bindings: {
    town: '<'
  }

Both services return the same object type and both work.

Answer 1

function TownCmpController(TownServices,Town,BuildingUpgradeRest) {
  var vm = this;
  this.upgradeBuilding = function(data) {
     BuildingUpgradeRest.update({townId:  vm.town.TownId,buildingId: data.building.BuildingId}).then(function (response) {
       vm.town = response;
     })
  }
}

Your service return promise, so you reslove service response and then setup vm.towns