JSFiddle - React, Tailwind, and code Playground

HTML

<div ng-controller="ctrl">
    <list items="list.items" name="list.name" collapsed="list.collapsed"></list>
    
    <br><br>
    
    <input type="button" ng-click="list.collapsed = !list.collapsed" value="Outside Toggle">
</div>

JavaScript

var app = angular.module('app', []);

app.controller('ctrl', function($scope)
{
	$scope.list = {
		name: 'Test',
		collapsed: true,
		items: [1, 2, 3]
	};
});

app.directive('list', function()
{
	return {
		restrict: 'E',
		scope: {
			collapsed: '=',
            name: '=',
			items: '='
		},
        template:
        	'<div>' +
        		'{{name}} collapsed: {{collapsed}}' +
        		'<div ng-show="!collapsed">' +
        			'<div ng-repeat="item in items">Item {{item}}</div>' +
        		'</div>' +
        		'<br><input type="button" ng-click="collapsed = !collapsed" value="Inside Toggle">' +
        	'</div>'
	};
});