JSFiddle - React, Tailwind, and code Playground

HTML

<div >
    <div ng-app ng-controller="TodoCtrl">
       <div>
            <form>
                <label>Filter1: <input type="text" ng-model="criteria.fieldA"/></label>&nbsp;
                <label>Filter2: <input type="text" ng-model="criteria.fieldB"/></label>
                <label>Filter3: <input type="text" ng-model="criteria.fieldC"/></label>
            </form>
       </div>
       <div>
           <label>Json String ({{jsonString.length}}): <br/><textarea cols="100" rows="10" ng-model="jsonString">            
           </textarea></label>
           <br/>
           <label>Json encoded string:  ({{jsonEncoded.length}})<br/><textarea cols="100" rows="10" ng-model="jsonEncoded">
             
           </textarea></label>
           <br/>
           <label>URL:<br/>
           <span>https://my.domain.com/rest/serach?criteria={{jsonEncoded}}</span>
           </label>
       </div>
    </div>
  </div>

JavaScript

function TodoCtrl($scope) {
  $scope.criteria={};
  $scope.criteria.fieldA="A";
  $scope.criteria.fieldB="B";
  $scope.criteria.fieldC="C";
  
  function updateJsonQuery($scope){
       $scope.jsonString = JSON.stringify($scope.criteria);
       $scope.jsonEncoded = window.btoa($scope.jsonString);
  }
  
  $scope.$watch('criteria.fieldA', function() {
      updateJsonQuery($scope);
  });
  
  $scope.$watch('criteria.fieldC', function() {
      updateJsonQuery($scope);
  });
  
  $scope.$watch('criteria.fieldB', function() {
       updateJsonQuery($scope);
  });
    
}