How to set a property of an object in angularjs of which you don't know the name in advance, and still make sure the bindings work?

My server can send down changes to the state of my app. When my app receives such changes, the following function is called: (note, in the actual app code, this function is not in the global scope)

function(message){
    data = window.JSON.parse(message.data);
    console.log(data);
    for(element in data){
        if(element[0] == "_"){continue;}
        $scope.state[element] = data[element];
    }
}

I have also tried to do this by cloning the state object, and then attaching it back onto the scope when I'm done manipulating it.

The clone function looks like this:

var clone = (function(){
    return function (obj) { Clone.prototype=obj; return new Clone() };
    function Clone(){}
}());

And my function receiving the data now looks like this.

function(message){
    data = window.JSON.parse(message.data);
    console.log(data);
    var cloned = new clone($scope.state);
    for(element in data){
        if(element[0] == "_"){continue;}
        cloned[element] = data[element];
    }
    $scope.state = cloned;
}

I had just an element in my controller to test this:

<div ng-controller='MainController'>
    {{ state | json}}
</di>

and it just isn't updating.

Is there a different way to add/change properties of which you don't know the name in advance, so that the bindings keep working?

Are you calling $scope.$apply()?

If your data is coming back asynchronously, chances are Angular is already done updating the UI before you update the scope. Give it a try and see if that works. If it doesn't, then we'll probably need more information.