JSFiddle - React, Tailwind, and code Playground

HTML

<div ng-app="app" ng-controller='myController'>
  <div>
    <button value="drop" drop>{{drop}}</button>
    <p>
      <span drop>{{select}}</span>
    </p>
    <p>
      <input type="button" value="Change" ng-click="selection()" />
    </p>
  </div>
</div>

JavaScript

angular.module('app', [])

.directive("drop", [function() {
  return {
    scope: true,
    restrict: 'A',

    link: function(scope, element, attrs) {
      return element.bind('click', function(e) {
        scope.drop = "changed from directive";
        scope.select = "changed from directive";
        scope.$apply();
      });
    }
  };
}]);

function myController($scope) {
  $scope.drop = "Initial value";
  $scope.select = "Initial Value";
  $scope.selection = function() {
    console.log("run again");
    $scope.drop = "changed from controller";
    $scope.select = "changed from controller";
  };
}