Dynamically display form data using AngularJS
<p>I would like to dynamically display <strong>Person</strong> and <strong>Address</strong> data using label and input value in <strong>Summary Section</strong>. As the user edits the form fields, a list items with label + value should display in the summary tables. If value has been removed in the form, that associated label and value should be removed from the <strong>Summary</strong> Section.</p>

<p>I have added client side validation for each input element. I tried to solve this and couldn't figure out what is best way to do it. Any help would be appreciated. </p>

<p>Example:</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>// the main (app) module
var myApp = angular.module("myApp", []);

// add a controller
myApp.controller("myCtrl", function($scope) {
  $scope.vm = {
    caller: {
      person: {
        firstName: '',
        lastName: '',
        phoneOne: '',
        email: ''
      },
      address: {
        lineOne: '',
        lineTwo: ''
      }
    }
  };
  $scope.save = function() {
    console.log($scope.vm);
  }
});

// add a directive
myApp.directive('showErrors', function($timeout, $compile) {
  return {
    restrict: 'A',
    require: '^form',
    link: function(scope, el, attrs, formCtrl) {
      // find the text box element, which has the 'name' attribute
      var inputEl = el[0].querySelector("[name]");
      // convert the native text box element to an angular element
      var inputNgEl = angular.element(inputEl);
      // get the name on the text box
      var inputName = inputNgEl.attr('name');
      // only apply the has-error class after the user leaves the text box
      var blurred = false;

      inputNgEl.bind('blur', function() {
        blurred = true;
        el.toggleClass('has-error', formCtrl[inputName].$invalid);
      });

      scope.$watch(function(scope) {
        return formCtrl[inputName].$invalid;
      }, function(invalid, scope) {
        // we only want to toggle the has-error class after the blur
        // event or if the control becomes valid
        if (!blurred &amp;&amp; invalid) {
          return
        }
        el.toggleClass('has-error', invalid);
      });

      scope.$on('show-errors-check-validity', function() {
        el.toggleClass('has-error', formCtrl[inputName].$invalid);
      });

      scope.$on('show-errors-reset', function() {
        $timeout(function() {
          el.removeClass('has-error');
        }, 0, false);
      });
    }
  }
});</code></pre>
<pre class="snippet-code-css lang-css prettyprint-override"><code>.form-group .help-block {
  display: none;
}
.form-group.has-error .help-block {
  display: inline;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" /&gt;
&lt;script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"&gt;&lt;/script&gt;

&lt;body ng-app="myApp" ng-controller="myCtrl"&gt;
  &lt;form name="claimForm" ng-submit="save()"&gt;
    &lt;h3&gt;PERSON&lt;/h3&gt;
    &lt;div class="col-md-6"&gt;
      &lt;div class="form-group form-caller" show-errors&gt;
        &lt;label class="control-label"&gt;First Name&lt;span class="help-block" ng-if="claimForm.callerFirstName.$error.required"&gt;&lt;i&gt;[required]&lt;/i&gt;&lt;/span&gt;
        &lt;/label&gt;
        &lt;input type="text" name="callerFirstName" ng-model="vm.caller.person.firstName" class="form-control" required="" /&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="col-md-6"&gt;
      &lt;div class="form-group form-caller" show-errors&gt;
        &lt;label class="control-label"&gt;Last Name&lt;span class="help-block" ng-if="claimForm.callerLastName.$error.required"&gt;&lt;i&gt;[required]&lt;/i&gt;&lt;/span&gt;
        &lt;/label&gt;
        &lt;input type="text" name="callerLastName" ng-model="vm.caller.person.lastName" class="form-control" required="" /&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;hr /&gt;
    &lt;h3&gt;ADDRESS&lt;/h3&gt;
    &lt;div class="col-md-6"&gt;
      &lt;div class="form-group" show-errors&gt;
        &lt;label class="control-label"&gt;Address Line 1&lt;span class="help-block" ng-if="claimForm.addressOne.$error.required"&gt;&lt;i&gt;[required]&lt;/i&gt;&lt;/span&gt;
        &lt;/label&gt;
        &lt;input type="text" name="addressOne" ng-model="vm.caller.address.lineOne" class="form-control" required="" /&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="col-md-6"&gt;
    &lt;div class="form-group" show-errors&gt;
      &lt;label class="control-label"&gt;Address Line 2&lt;span class="help-block" ng-if="claimForm.addressTwo.$error.required"&gt;&lt;i&gt;[required]&lt;/i&gt;&lt;/span&gt;
      &lt;/label&gt;
      &lt;input type="text" name="addressTwo" ng-model="vm.caller.address.lineTwo" class="form-control" required="" /&gt;
    &lt;/div&gt;
     &lt;/div&gt;
    &lt;hr /&gt;
    &lt;input type="submit" id="submit" value="SUBMIT" class="btn btn-primary btn-lg" /&gt;
    {{vm | json }}
  &lt;/form&gt;
  &lt;h2&gt;Summary&lt;/h2&gt;
  &lt;div id="person"&gt;
    &lt;h3&gt;PERSON &lt;/h3&gt;
  &lt;/div&gt;
  &lt;hr /&gt;
  &lt;div id="address"&gt;
    &lt;h3&gt;ADDRESS&lt;/h3&gt;
  &lt;/div&gt;
&lt;/body&gt;</code></pre>
</div>
</div>
</p>

<p>Thanks in Advance</p>