JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.1.4/angular.min.js"></script>
    <div ng-app="myapp" ng-controller="MainCtrl">
      <div>
        <span>input.ng-model="myobj.foo" </span>
        <input my-directive ng-model="myobj.foo">
        <br>
        <span ng-non-bindable>{{myobj.foo()}} = </span>
        <span>{{myobj.foo()}}</span>
      </div>
      <br><br>
      <div>
        <span>input.ng-model="myobj.bar" </span>
        <input my-directive ng-model="myobj.bar">
        <br>
        <span ng-non-bindable>{{myobj.bar()}} = </span>
        <span>{{myobj.bar()}}</span>
      </div>
      
      <hr />
      <p>
        Changing the value of either <span>foo</span> or 
        <span>bar</span> will also change the other in order
        to keep foo being always bar-1. This can be correctly
        seen in the model.
        <br />
        <br />
        Problem is, the value in the input element is not updated.
      </p>
    </div>

CSS

body {
    font-family: Arial;
}

span {
    font-family: Monospace, Courier New;
}

JavaScript

function obj() {
    var foo = 1;
    var bar = 2;
    
    return {
        foo: function (value) {
            if (value) {
                foo = value;
                bar = +foo + 1;
            }
            return foo;
        },
        bar: function (value) {
            if (value) {
                bar = value;
                foo = +bar - 1;
            }
            return bar;
        }
    }    
}

angular.module('myapp', []).directive('myDirective', function () {
    return {
        require: 'ngModel',
        link: function ($scope, $element, $attrs, ngModel) {
            ngModel.$formatters.push(function (modelValue) {
               return modelValue(); 
            });
            
            ngModel.$parsers.push(function (viewValue) {
               ngModel.$modelValue(viewValue);
               return ngModel.$modelValue;
            });
        }
    };
});

angular.module('myapp').controller('MainCtrl', function ($scope) {
    $scope.myobj = obj();
});