angularjs - Dynamic form inputs not validating with Angular validation -

i have form , of input fields dynamically filled external script have no access to. fields filled when go submit, thinks empty.

is there way without adding external library?

i have scope.$watch may doing wrong. attached code.

edit: jquery have in code adding input values mimic external script. user click button auto populate input fields. not able use jquery in actual code, needs 100% angular jqlite.

// create angular app  var validationapp = angular.module('validationapp', []);    // create angular controller  validationapp.controller('maincontroller', function($scope) {    $scope.userform = {};        // function submit form after validation has occurred			    $scope.submitform = function() {      // check make sure form valid      if ($scope.userform.$valid) {        alert('our form amazing');      }    };  });    //create directive  validationapp.directive('maindirective', function() {    return function(scope, el, attrs) {            scope.$watch('userform.'+attrs.name+'.$valid', function(newval, oldval) {        console.log("newval: ", newval);      }, true);       	}  });    //dynamically adding value input not change  $(document).ready(function() {    settimeout(function() {      $('.form .name').val('john doe');       $('.form .username').val('johnd2017');       $('.form .email').val('johnd2017@test.com');     }, 2000);   });

body { padding-top:30px; }

<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet"/>  <script src="https://code.angularjs.org/1.3.14/angular.min.js"></script>    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>  <div ng-app="validationapp" ng-controller="maincontroller">  <div class="container">  <div class="row">         <div class="col-sm-6">      <!-- form ============ -->          <form name="userform" class="form" ng-submit="submitform()" main-directive novalidate>            <!-- name -->          <div class="form-group" ng-class="{ 'has-error' : userform.name.$invalid && userform.$submitted }">              <label>name</label>              <input type="text" name="name" class="form-control name" ng-model="user.name" required>              <p ng-show="userform.name.$invalid && userform.$submitted" class="help-block">you're name required.</p>          </div>                  <!-- username -->          <div class="form-group" ng-class="{ 'has-error' : userform.username.$invalid && userform.$submitted }">              <label>username</label>              <input type="text" name="username" class="form-control username" ng-model="user.username" ng-minlength="3" ng-maxlength="8" required>              <p ng-show="userform.username.$error.minlength" class="help-block">username short.</p>              <p ng-show="userform.username.$error.maxlength" class="help-block">username long.</p>            <p ng-show="userform.username.$invalid && userform.$submitted" class="help-block">you're username required.</p>          </div>                    <!-- email -->          <div class="form-group" ng-class="{ 'has-error' : userform.email.$invalid && userform.$submitted }">              <label>email</label>              <input type="email" name="email" class="form-control email" ng-model="user.email" required>              <p ng-show="userform.email.$invalid && !userform.email.$pristine" class="help-block">enter valid email.</p>            <p ng-show="userform.name.$invalid && userform.$submitted" class="help-block">you're email required.</p>          </div>                <!-- city -->          <div class="form-group city">              <label>city</label>              <input type="text" name="city" class="form-control city" ng-model="user.city">          </div>                    <button type="submit" class="btn btn-primary">submit</button>                </form>    </div>    <div class="col-sm-6">      <!-- validation tables ======== -->          <div class="row">          <div class="col-xs-3">              <h3>form</h3>              <table class="table table-bordered">                  <tbody>                      <tr>                          <td ng-class="{ success: userform.$valid, danger: userform.$invalid }">valid</td>                      </tr>                      <tr>                          <td ng-class="{ success: userform.$pristine, danger: !userform.$pristine }">pristine</td>                      </tr>                      <tr>                          <td ng-class="{ success: userform.$dirty }">dirty</td>                      </tr>                  </tbody>              </table>          </div>          <div class="col-xs-3">              <h3>name</h3>              <table class="table table-bordered">                  <tbody>                      <tr>                          <td ng-class="{ success: userform.name.$valid, danger: userform.name.$invalid }">valid</td>                      </tr>                      <tr>                          <td ng-class="{ success: userform.name.$pristine, danger: !userform.name.$pristine }">pristine</td>                      </tr>                      <tr>                          <td ng-class="{ success: userform.name.$dirty }">dirty</td>                      </tr>                      <tr>                          <td ng-class="{ success: userform.name.$touched }">touched</td>                      </tr>                  </tbody>              </table>          </div>          <div class="col-xs-3">              <h3>username</h3>              <table class="table table-bordered">                  <tbody>                      <tr>                          <td ng-class="{ success: userform.username.$valid, danger: userform.username.$invalid }">valid</td>                      </tr>                      <tr>                          <td ng-class="{ success: userform.username.$pristine, danger: !userform.username.$pristine }">pristine</td>                      </tr>                      <tr>                          <td ng-class="{ success: userform.username.$dirty }">dirty</td>                      </tr>                      <tr>                          <td ng-class="{ success: userform.username.$touched }">touched</td>                      </tr>                  </tbody>              </table>          </div>          <div class="col-xs-3">              <h3>email</h3>              <table class="table table-bordered">                  <tbody>                      <tr>                          <td ng-class="{ success: userform.email.$valid, danger: userform.email.$invalid }">valid</td>                      </tr>                      <tr>                          <td ng-class="{ success: userform.email.$pristine, danger: !userform.email.$pristine }">pristine</td>                      </tr>                      <tr>                          <td ng-class="{ success: userform.email.$dirty }">dirty</td>                      </tr>                      <tr>                          <td ng-class="{ success: userform.email.$touched }">touched</td>                      </tr>                  </tbody>              </table>          </div>        <div class="col-xs-3">              <h3>city</h3>              <table class="table table-bordered">                  <tbody>                      <tr>                          <td ng-class="{ success: userform.city.$valid, danger: userform.city.$invalid }">valid</td>                      </tr>                      <tr>                          <td ng-class="{ success: userform.city.$pristine, danger: !userform.city.$pristine }">pristine</td>                      </tr>                      <tr>                          <td ng-class="{ success: userform.city.$dirty }">dirty</td>                      </tr>                      <tr>                          <td ng-class="{ success: userform.city.$touched }">touched</td>                      </tr>                  </tbody>              </table>          </div>      </div>        </div>  </div>  </div>

because if html dynamically added after angular compilation , linking need compile added part self using $compile service.

but if want change value of input outside of angular, need trigger input , change events on inputs notify angular change. example can done similar code:

$(document).ready(function() {   var notifyangularaboutchange = function () {     $('.form .name').trigger('input');     $('.form .name').trigger('change');       $('.form .username').trigger('input');      $('.form .username').trigger('change');       $('.form .email').trigger('input');      $('.form .email').trigger('change');    };    var checkchange = function () {     // check expected changes in needed elements     // , return true if change found   };    vat waitforchange = function () {     if (checkchange()) {       notifyangularaboutchange();     } else {       settimeout(waitforchange, 100);     }   };    waitforchange(); });