JSFiddle - React, Tailwind, and code Playground

by S_YOU

HTML

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.js"></script>
<div ng-app='my.app'>
    <div ng-controller="TestCtrl">
        <input-number data-min="{{::min}}" data-max="{{::max}}"></input-number>
    </div>
</div>

<button onclick="javascript:(function(){var e=angular.element(document.getElementsByTagName('body')),c=[],d=function(a){angular.forEach(['$scope','$isolateScope'],function(b){a.data()&&a.data().hasOwnProperty(b)&&angular.forEach(a.data()[b].$$watchers,function(a){c.push(a)})});angular.forEach(a.children(),function(a){d(angular.element(a))})};d(e);var b=[];angular.forEach(c,function(a){0>b.indexOf(a)&&b.push(a)});b=b.map(function(a){return{fn:a.fn.toString(),last:JSON.stringify(a.last),exp:a.exp.toString(),get:a.get.toString(),eq:a.eq}});console.table(b)})()">Print Watchers to Console</button>

JavaScript

angular.module('test', [])
.directive('inputNumber', function () {
    return {
        restrict: 'E',
        scope:{
            min: '@',
            max: '@'
        },
        template: '<input type="number" min="{{::min}}" max="{{::max}}" ng-model="value"/>',
        link: function($scope, $element, $attrs) {
            $scope.value = parseFloat($scope.min);
        }
    }
})
.controller('TestCtrl', ['$scope', function($scope) {    
    $scope.min = 20;
    $scope.max = 40;
}]);

angular.module('my.app', ['test']);