JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css">
<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.3/angular.js"></script>
<h1>WARNING</h1>
<p>This is an example that shows how an isolated scope won’t work and that <code>scope.$eval()</code> must be used instead.</p><p>Notice how altering the input in the first, as well as the second, form will not update the <code>$watch</code> expression correctly.</p>
<p><a href="http://jsfiddle.net/gUSZS/">JSFiddle of the code that works</a></p>
<p>Discussion: <a href="http://stackoverflow.com/a/21992003/590522">http://stackoverflow.com/a/21992003/590522</a></p>

<div ng-controller='Ctrl'>
    <h2>Plain version (nxEqual)</h2>
    <form name="form">
        <input ng-model="login.password" type="password" name="password" placeholder="Password" required><br>
        <div class="error" ng-show="form.password.$error.required">Required</div>
        <input ng-model="login.verify" type="password" name="verify" placeholder="Confirm Password" required nx-equal="login.password"><br>
        <div class="error" ng-show="form.verify.$error.required">Required!</div>
        <div class="error" ng-show="form.verify.$error.nxEqual">Must be equal!</div>
    </form>
            
    <h2>Extended version (nxEqualEx)</h2>
    <form name="formEx">
        <input ng-model="loginEx.password" type="password" name="password" placeholder="Password" required><br>
        <div class="error" ng-show="formEx.password.$error.required">Required</div>
        <input ng-model="loginEx.verify" type="password" name="verify" placeholder="Confirm Password" required nx-equal-ex="loginEx.password"><br>
        <div class="error" ng-show="formEx.verify.$error.required">Required!</div>
        <div class="error" ng-show="formEx.verify.$error.nxEqualEx">Must be equal!</div>
    </form>
</div>

CSS

body {
    margin: 10px;
}
h2 {
    margin: 20px 0 5px 0;
}
p {
    margin: 10px 0;
}
.error {
    color: darkred;
    margin: 2px 0 5px 0;
}

JavaScript

/******************************************************************************
 ******************************************************************************
 ** WARNING:
 ** This is an example that shows how an isolated scope for `nxEqual`
 ** or `nxEqualEx` via e.g. `scope: { nxEqual: '=' }` won’t work, and that
 ** `scope.$eval` must be used instead.
 **
 ** See http://stackoverflow.com/a/21992003/590522 for more info
 ** and http://jsfiddle.net/gUSZS/ for the working code.
 ******************************************************************************
 *****************************************************************************/

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

app.directive('nxEqual', function() {
    return {
        require: 'ngModel',
        scope: {
            nxEqual: '='
        },
        link: function (scope, elem, attrs, model) {
            if (!attrs.nxEqual) {
                console.error('nxEqual expects a model as an argument!');
                return;
            }
            scope.$watch(attrs.nxEqual, function (value) {
                model.$setValidity('nxEqual', value === model.$viewValue);
            });
            model.$parsers.push(function (value) {
                var isValid = value === scope.nxEqual;
                //var isValid = value === scope.$eval(attrs.nxEqual);
                model.$setValidity('nxEqual', isValid);
                return isValid ? value : undefined;
            });
        }
    };
});

app.directive('nxEqualEx', function() {
    return {
        require: 'ngModel',
        scope: {
            nxEqualEx: '='
        },
        link: function (scope, elem, attrs, model) {
            if (!attrs.nxEqualEx) {
                console.error('nxEqualEx expects a model as an argument!');
                return;
            }
            scope.$watch(attrs.nxEqualEx, function (value) {
                // Only compare values if the second ctrl has a value.
                if (model.$viewValue...