JSFiddle - React, Tailwind, and code Playground

HTML

<div ng-controller="DataController as vm">
  <div ng-repeat="name in vm.users track by $index">
    {{name}}
  </div>
  <form name="form" validation="vm.errors">
    <input validator ng-model="vm.name" name="vm.name" placeholder="name" type="text" />
     <a href="#" ng-click="vm.add(vm.name)">Add</a>
  </form>
</div>

JavaScript

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

app.controller("DataController", DataController);

function DataController($scope) {

	var vm = this;
  vm.name = "Mary";
  vm.users = ["Alice", "Peter"];
  vm.errors = 1;
  vm.add = function(name) {  
      vm.errors++;
      vm.users.push(name);    
  }
  
}

app.directive("validation", validation);

function validation() {

  var validation = {
    controller: ["$scope", controller],
    restrict: "A",
    scope: {
      validation: "="
    }
  };

  return validation;

  function controller($scope) {
    this.errors = function(){ return $scope.validation; };
  } 

}  

app.directive("validator", validator);

function validator() {

  var validator = {
    link: link,
    replace: false,
    require: "^validation",
    restrict: "A"
  };

  return validator;
  
  function link(scope, element, attributes, controller) {
  	scope.$watch(controller.errors, function (newValue) {
      console.log(newValue);
    });
  }
 
}