JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.min.js"></script>

<div ng-app="test" ng-controller="MainCtrl">
    testModel: {{testModel}}<br><br>
    
    This one doesn't bind to testModel:<br>
  <input type="text" ng-model="testModel" dir="123"><br>
    testModel (local to dir): <span id="out"></span><br><br>
    
    
    Type in this one to change testModel:<br>
    <input type="text" ng-model="testModel"><br>
</div>

JavaScript

function MainCtrl($scope){
  $scope.testModel = "444"; 
  $scope.aaa = 123;    
}


angular.module('test', []).directive('dir', function() {
  return {
      controller: MainCtrl,
      scope: true,
      link: function(scope, element) {          
           element.bind("keyup", function(event) {
                  document.getElementById("out").innerHTML = scope.testModel;
            });          
      }
  }
});