Is it possible to dynamically change the collapsed flag ?

[herveDarritchon]

I 'd like to propose a button to collapse or expand the json view in my page.
I tried to use $watch (angular watcher) to do it by changing the value of the collapsed tag in HTML dynamically each time I click. But it doesn't work.

Do I do something wrong or may it's not possible.

HTML :

My click definition

<h2 class="panel-title pull-left">{{selectedConsumption.contractList.contract[0].usageConsoList.usageConso[0].usageKey}}</h2><span class="pull-right" ng-click="toggleCollapse()">+</span>

My Json Explorer item

<div class="panel-body"> <json-explorer json-data="{{selectedConsumption}}" collapsed="{{collapse}}"></json-explorer> </div>

Javascript :

sccController.controller('ConsumptionCtrl', ['$scope', 'ConsumptionService',
    function($scope, ConsumptionService) {

        $scope.collapsed = true;

        ConsumptionService.getAll(function(data) {

            $scope.consumptions = data;
            $scope.selectedConsumption = data;
        });

        $scope.details = function(consumption) {
            $scope.selectedConsumption = consumption;
        };

        $scope.toggleCollapse = function() {
            $scope.collapsed = !$scope.collapsed;
        };

        $scope.$watch('collapsed', function(newval, oldval) {
            $scope.collapse = newval;
        });
}]);

Thanks

[odra]

The demo folder (demo/demo.html) has an example for this task (your code should work as well).
Could you please test it again?