JSFiddle - React, Tailwind, and code Playground

HTML

<div ng-app="myApp">
    <div ng-controller="ParentController">
           {{anyVar}}  
        <ul ng-model="anyVar">
           <li>
               <a custom-value="111">It works</a>
           </li>
           <li>
               <a custom-value="222">It also works</a>
           </li>
           <li>
               ----------------------
           </li>
           <li ng-repeat="item in list">
               <a custom-value="333">{{item}}</a>
           </li>
        </ul>
    </div>
</div>

JavaScript

var app = angular.module('myApp',[]);
app.controller('ParentController',['$scope', function($scope) {
  $scope.anyVar = "Anything";
    
  $scope.list = ['It doesn\'t work','It also doesn\'t work'];
    
}]);

app.directive('customValue', [function() {
    return {
      restrict: 'A',
      require: '^?ngModel',
      link: function(scope, element, attr, ngModel) {
          element.bind('click',function() {
             var element = angular.element(this);
             var li = element.parent();
             ngModel.$setViewValue(123);
          })
      }
    };
}]);