JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://code.angularjs.org/1.3.11/angular.min.js"></script>
<body ng-app="myApp" ng-controller="myCtrl">
    <my-input ng-repeat="input in inputs" ng-model="input.model" expression="input.expression" hint="{{input.hint}}"></my-input>
</body>

CSS

input {
    margin: 10px 0;
    text-align: right;
    padding: 5px;
}
.total input {
    border: 2px dashed silver;
}
tt {
    font-size: 15px;
}

JavaScript

console.clear();

angular.module("myApp", [])
.controller("myCtrl", ["$scope", function($scope) {
    $scope.a = 10;
	$scope.b = 2;
	$scope.c = 6;
	$scope.customtotal = function() {
		return $scope.a + ($scope.b * 2) + ($scope.c / 2);
	};
	$scope.inputs = [
		{model: $scope.a, hint: "+"},
		{model: $scope.b, hint: "*2 +"},
		{model: $scope.c, hint: "/2 ="},
        {expression: $scope.customtotal}
	];
}])
.directive("myInput", [function() {
	return {
		restrict: "E",
		template: '<div><input type="number" ng-model="ngModel" />&nbsp;<tt>{{hint}}</tt></div>',
		scope: {
			ngModel: "=",
			expression: "&",
            hint: "@"
		},
		link: function(scope, elem) {
			var expr = scope.expression();
            if(expr) {
                elem.addClass("total").find("input").attr("disabled", true);
            	scope.ngModel = expr();
            }
		}
	};
}]);