JSFiddle - React, Tailwind, and code Playground

by Satbir Singh

HTML

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.13/angular.min.js"></script>
<div ng-controller="AppCtrl">
  {{ firstName }}
  <my-component first-name="firstName"></my-component>
</div>

JavaScript

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

myApp.controller('AppCtrl',['$scope',function($scope){
    
$scope.firstName = "Donny P."
    
}]);

myApp.directive('myComponent', function(){
  return {
    scope: { firstName: '=' },
    template: '<button ng-click="changeName()">Test</button>',
    link: function(scope, element, attrs){
      // A function that should update a parent scope variable.
      scope.changeName = function(){
        scope.firstName = "Name was changed."
      }
    }
  }
});