JSFiddle - React, Tailwind, and code Playground

by phaas

HTML

<div ng-app="test">

    <div ng-controller="Parent">
        <ul>
            <li>{{ data }}</li>
            <li ng-repeat="array in many">{{ array }}</li>
        </ul>

        <fieldset>
            <legend>Single</legend>
            <span test ng-model="data"></span>
        </fieldset>

        <fieldset>
            <legend>Repeated List</legend>
            <div ng-repeat="array in many">
                <span test ng-model="array"></span>
            </div>
        </fieldset>

    </div>
</div>

JavaScript

var module = angular.module("test", []);

module.controller("Parent", function($scope) {
    $scope.data = [1, 2, 3];
    
    $scope.many = [ [1], [2], [3,4,5]];
});

module.directive("test", function() {

    return {
        restrict: 'A',
        require: 'ngModel',
        template: '<div> {{ value}} <button ng-click="add()">+</button><button ng-click="remove()">-</button></div>',
        scope: {
            value: '=ngModel'
        },
        link: function(scope, element, attrs, ngModel) {
           
            scope.add = function() {
                //scope.value.push( Math.round(Math.random() * 100));
                scope.value = [];
            };
            
            scope.remove = function() {
                //scope.value.pop();
                scope.value = null;
            };
        }
    }

});