Nested Partials and Object References in AngularJS

Question

I have a partial view that looks like:

<div ng-if="activeItem.typeOf == 'text'">
     <div onload="item=activeItem" ng-include="'views/app-builder/text.html'"></div>
</div>

when the users clicks a button I have a controller method that resets the activeItem

 $scope.showDetails = function(item){
        $scope.activeItem = item;
 };

with activeItem looking like:

{  name: "Candy", typeOf: "text" }

it works as expected the first time, but every time after that the active item in the nested partial is never updated. Likely because the reference onload was never updated. What is the 'right' way to handle this in angular?

Answer 1

Always use a reference to facilitate AngularJS to track the change via prototype. This is the nature of Javascript. Try this approach:

$scope.activeItem = {};
$scope.activeItem.values = {
    name: "Candy0",
    typeOf: "text0"
}

$scope.showDetails = function (item) {
    $scope.activeItem.values = item;
}

In the view

{{item.values.name}}