View only partially refreshed after $scope.$on()

Question

In this AngularJS controller for a pre-filled form, fetching the data is triggered by an event using $broadcast and $on. However, when the data updates, only some of the corresponding fields get updated in the view.

$scope.currentHouse = {};
$scope.$on('houseInfoLoad', function(event, data) {

    $scope.currentHouse = data.houseDetail; //does not refresh the view
    console.log($scope.currentHouse); //output is correct

    //the next three calls refresh the corresponding fields in the view
    $scope.changeGarageRadioValue($scope.currentHouse.hasGarage);
    utils.setSelection($scope.houseKeywords, $scope.currentHouse.keyword.id);
    utils.setSelection($scope.houseTypes, $scope.currentHouse.type.id);     

});

changeGarageRadioValue() essentially does what it says, and utils.setSelection(list, id) adds a selected = true property to the element of the list that has the id. This has the effect of setting the value of a select field (using isteven's multi-select plugin ).

The view has a few text fields bound to properties of $scope.currentHouse , as well as these radio buttons and select fields.

The result is that the text fields sometimes do not get updated, however the select and radio buttons do .

Here's what I tried unsuccessfully:

• Wrapping everything in a $timeout() ;
• Calling $scope.$apply() after setting $scope.currentHouse (throws an error saying that we are already inside an $apply() )
• Changing the initial definition of $scope.currentHouse from {} to an object with each of the fields set to null.

Can anyone see what I am missing, or how to force trigger the refresh?

EDIT : with extracts from the view :

A text field:

<label>ADDITIONAL DESCRIPTION</label>
<div>
    <input type="text" ng-model="currentHouse.additionalDescription" class="input-mandatory" value=""/>
</div>

A multi-select:

<label>TYPE</label>
<div>
    <div directive-id="houseType" multi-select input-model="houseTypes" output-model="currentHouse.type" button-label="text" item-label="text" selection-mode="single" default-label="Select" tick-property="selected" ></div>
</div>

The radio buttons :

<div><label>HAS GARAGE</label></div>
<div>
    <div id="radiobuttonNo" ng-click="changeGarageRadioValue(false);">
        NO
    </div>
    <div id="radiobuttonYes" ng-click="changeGarageRadioValue(true);" class="active">
        YES
    </div>
</div>

EDIT #2 as per Alok Singh's suggestion:

I tried putting data.houseDetail into $scope.currentHouse.house instead of $scope.currentHouse directly, and changing the view accordingly. Still no results.

Answer 1

$scope.currentHouse = data.houseDetail

You cannot get the updated value of currentHouse because its a model.
So change the above code ie

$scope.currentHouse.house = data.houseDetail