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();


                scope.$apply(function () {
                    ngModel.$setViewValue(123);
                });
            })
        }
    };
}]);