Angular 1.5 Base

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.9/angular.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-xeditable/0.8.1/js/xeditable.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/angular-xeditable/0.8.1/css/xeditable.css">
<div id="body">
  <div ng-controller="AppController as vm">
    <div class="form-container">
      <form editable-form name="vm.form1">
        <div class="inline-form-field">
          <span class="title">First Name: </span>
          <span editable-text="vm.user1.first_name" e-tabindex="0" e-name="first_name" e-required>{{ vm.user1.first_name || '' }}</span>
        </div>
        <div class="inline-form-field">
          <span class="title">Last Name: </span>
          <span editable-text="vm.user1.last_name" e-tabindex="1" e-name="last_name" e-required>{{ vm.user1.last_name || '' }}</span>
        </div>
      </form>
    </div>
    <div class="form-container">
      <form editable-form name="vm.form2">
        <div class="inline-form-field">
          <span class="title">First Name: </span>
          <span editable-text="vm.user2.first_name" e-tabindex="0" e-name="first_name" e-required>{{ vm.user2.first_name || '' }}</span>
        </div>
        <div class="inline-form-field">
          <span class="title">Last Name: </span>
          <span editable-text="vm.user2.last_name" e-tabindex="1" e-name="last_name" e-required>{{ vm.user2.last_name || '' }}</span>
        </div>
      </form>
    </div>
  </div>
</div>

SCSS

.form-container {
  float: left;
  border: 1px solid black;
  padding: 20px;
  
  .inline-form-field {
    input {
      padding: 5px;
    }
  }
}

JavaScript

angular.module('app', ['xeditable'])

.controller('AppController', ['$injector', '$timeout', function($injector, $timeout) {
  var vm = this;
  vm.message = 'Hello world';
  vm.user1 = {};
  vm.user2 = {};

  $timeout(function() {
    vm.form1.$show();
    vm.form2.$show();
     vm.user1.first_name = "Paul";
    vm.user2.first_name = "Brian";
  })


}]);

setTimeout(function() {
  angular.bootstrap(document.getElementById('body'), ['app']);
});