JSFiddle - React, Tailwind, and code Playground

HTML

<div ng-app="app" ng-controller='AppController'>
    <p>Selected: {{ selected.foo }}</p>
    <div ng-switch on="selected.foo">
        <div ng-switch-default>
            <p>Item: {{ selected.foo }}</p>
            <custom-tag selected-item="selected.foo" />
        </div>
        <div ng-switch-when="New value">
            <p>Worked</p>
        </div>
    </div>
</div>

JavaScript

angular.module('app', [])

    .directive("customTag", ['$parse', function ($parse) {
    return {
        restrict: "E",
        replace: true,
        template: "<input type='button' value='Click me' />",

        link: function (scope, element, attrs) {
            element.bind('click', function () {
                scope.$apply(function () {
                    $parse(attrs.selectedItem).assign(scope.$parent, "New value");
                });
            });
        }
    };
}]);

function AppController($scope) {
    $scope.selected = { 'foo': 'Old value' };
}