JSFiddle - React, Tailwind, and code Playground

HTML

<div id="wrap" ng-app ng-controller="demoController">
    <p>{{counter}}<br>
    {{message}}<br></p>
    <hr>
    <div id="item-{{item.id}}" ng-repeat="item in items">
        <p>{{item.message}}<br>
        {{item.info}}<br>
        {{item.counter}}</p>
        <a id="item-{{item.id}}-ref" href="javascript:void(0);" onclick="hi(this)">click item: {{item.counter}}</a></p>
        <hr>
    </div>
    <p><a id='inside' href="javascript:void(0);" onclick="hi(this)">Inside</a></p>
</div>

<hr>
<p><a id='outside' href="javascript:void(0);" onclick="hi(this)">Outside (doesn't work)</a></p>
<hr>
<p><a id='another' href="javascript:void(0);" onclick="hiFromOutside()">Another way in</a></p>

JavaScript

function demoController( $scope ) {
    console.log( "Initialize controller" );
    $scope.counter = 0;
    $scope.items = [
       { id: 'A', counter: 0, message: "hello, A" },
       { id: 'B', counter: 0, message: "hello, B" },
       { id: 'C', counter: 0, message: "hello, C" }
    ];

    $scope.updateMessage = function( msg ) {
        if ( this.item ) {
            this.item.message = msg;
        }
        else {
            console.log( "No item" );
            $scope.message = msg;
        }
    };
}

function hi( elem ) {
    console.log( "hi: " + elem.id );
    var scope = angular.element( elem ).scope();
    if ( scope ) {
    		alert('sdfsdf');
    		console.log(scope);
        scope.$apply( function() {
            if ( scope.item ) {
                scope.item.info = "nanu";
                scope.item.counter++;
            }
            else {
                scope.counter++;
            }
            scope.updateMessage( "All your base are belong to me!" );
        });
    }
    else {
        console.log( "No scope, radio" );
    }
}

function hiFromOutside() {
   var elem = document.getElementById( "inside" );
   hi( elem );
}