juliandavidmr/index.html

## index.html
<!DOCTYPE html>
<html ng-app="revalidation">

  <head>
    <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet" data-semver="3.3.1" data-require="bootstrap@3.3.1" />
    <script data-require="angular.js@1.4.3" data-semver="1.4.3" src="https://code.angularjs.org/1.4.3/angular.js"></script>
    <script
  src="https://code.jquery.com/jquery-3.4.1.min.js"
  integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
  crossorigin="anonymous"></script>
    <script src="script.js"></script>
  </head>

  <body ng-controller="main">
    <form class="form-horizontal" role="form" name="form">
      <div class="container">
        <div class="row">
          <div ng-class="{'has-error': form.city.$dirty && form.city.$invalid, 'has-success': form.city.$dirty && form.city.$valid}" class="form-group">
            <label for="" class="col-md-4 control-label">City</label>
            <div class="col-md-8">
              <input required="" ng-model="city" name="city" class="form-control" id="city" my-directive />
              <span class="help-block">Allowed only if "Earth" is selected</span>
              <div ng-show="form.city.$dirty && form.city.$error.required">
                <span class="text-danger">This value is required</span>
              </div>
              <div ng-show="form.city.$dirty">
                <span class="text-danger">dirty!</span>
              </div>
            </div>
          </div>
          <br />
          <button ng-click="submit()" ng-disabled="!form.$dirty || form.$invalid" class="btn btn-primary" type="button">Submit</button>
        </div>
      </div>
    </form>
    <br />
    <strong>{{ city }}</strong>
    <br />
    <br />
    <br />
 Selected planet: {{planet}}

  <br>
  <button onclick="changeText()">Cambiar</button>

  </body>

</html>

## script.js
// Code goes here

angular
  .module('revalidation', [])

  .controller('main', [
    '$scope',
    function($scope) {
      $scope.submit = function() {
        alert('YAYYYY!! Submited!');
      };
    },
  ]);

/**
 * @param {Element} fieldElement
 */
function refreshValue(fieldElement, newValue) {
  console.log('Cambio', fieldElement, newValue);
  var $scope = angular.element(fieldElement).scope();
  if ($scope) {
    var nameScope = $scope.form[fieldElement.getAttribute('name')];
    nameScope.$setViewValue(newValue);
    nameScope.$validate();
    nameScope.$render();
  }
}

$(function() {
  setTimeout(function() {
    window.MutationObserver =
      window.MutationObserver ||
      window.WebKitMutationObserver ||
      window.MozMutationObserver;
    // Find the element that you want to "watch"
    var target = document.querySelector('#city'),
      // create an observer instance
      observer = new MutationObserver(function(mutation) {
        mutation.forEach(function(m) {
          if (m.attributeName === 'value') {
            refreshValue(target, target.getAttribute('value'));
          }
        });
      }),
      // configuration of the observer:
      config = {
        attributes: true, // this is to watch for attribute changes.
      };
    // pass in the element you wanna watch as well as the options
    observer.observe(target, config);
    // later, you can stop observing
    // observer.disconnect();
  });
});

function changeText() {
  const cityField = document.getElementById('city');
  console.log('Holaaa');
  $('#city').val('123xyz');
}
	<!DOCTYPE html>
	<html ng-app="revalidation">

	<head>
	<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet" data-semver="3.3.1" data-require="bootstrap@3.3.1" />
	<script data-require="angular.js@1.4.3" data-semver="1.4.3" src="https://code.angularjs.org/1.4.3/angular.js"></script>
	<script
	src="https://code.jquery.com/jquery-3.4.1.min.js"
	integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
	crossorigin="anonymous"></script>
	<script src="script.js"></script>
	</head>

	<body ng-controller="main">
	<form class="form-horizontal" role="form" name="form">
	<div class="container">
	<div class="row">
	<div ng-class="{'has-error': form.city.$dirty && form.city.$invalid, 'has-success': form.city.$dirty && form.city.$valid}" class="form-group">
	<label for="" class="col-md-4 control-label">City</label>
	<div class="col-md-8">
	<input required="" ng-model="city" name="city" class="form-control" id="city" my-directive />
	<span class="help-block">Allowed only if "Earth" is selected</span>
	<div ng-show="form.city.$dirty && form.city.$error.required">
	<span class="text-danger">This value is required</span>
	</div>
	<div ng-show="form.city.$dirty">
	<span class="text-danger">dirty!</span>
	</div>
	</div>
	</div>
	<br />
	<button ng-click="submit()" ng-disabled="!form.$dirty \|\| form.$invalid" class="btn btn-primary" type="button">Submit</button>
	</div>
	</div>
	</form>
	<br />
	<strong>{{ city }}</strong>
	<br />
	<br />
	<br />
	Selected planet: {{planet}}

	<br>
	<button onclick="changeText()">Cambiar</button>

	</body>

	</html>
	// Code goes here

	angular
	.module('revalidation', [])

	.controller('main', [
	'$scope',
	function($scope) {
	$scope.submit = function() {
	alert('YAYYYY!! Submited!');
	};
	},
	]);

	/**
	* @param {Element} fieldElement
	*/
	function refreshValue(fieldElement, newValue) {
	console.log('Cambio', fieldElement, newValue);
	var $scope = angular.element(fieldElement).scope();
	if ($scope) {
	var nameScope = $scope.form[fieldElement.getAttribute('name')];
	nameScope.$setViewValue(newValue);
	nameScope.$validate();
	nameScope.$render();
	}
	}

	$(function() {
	setTimeout(function() {
	window.MutationObserver =
	window.MutationObserver \|\|
	window.WebKitMutationObserver \|\|
	window.MozMutationObserver;
	// Find the element that you want to "watch"
	var target = document.querySelector('#city'),
	// create an observer instance
	observer = new MutationObserver(function(mutation) {
	mutation.forEach(function(m) {
	if (m.attributeName === 'value') {
	refreshValue(target, target.getAttribute('value'));
	}
	});
	}),
	// configuration of the observer:
	config = {
	attributes: true, // this is to watch for attribute changes.
	};
	// pass in the element you wanna watch as well as the options
	observer.observe(target, config);
	// later, you can stop observing
	// observer.disconnect();
	});
	});

	function changeText() {
	const cityField = document.getElementById('city');
	console.log('Holaaa');
	$('#city').val('123xyz');
	}