Angular-Xeditable loading page with all rows in Edit Mode

I am trying angular-xeditable for the first time and managed to get everything working EXCEPT the page loads with all the table rows in Edit Mode and I need the default behavior. (Clicking the 3 cancel buttons after load shows what I am looking to create).

I have a stripped-down plunker (no CRUD methods) that shows what I mean ... plunker

I also created the same using $scope but I would prefer not to use $scope ... plunker with $scope

here is my view:

<body ng-controller="DistributorsController as dist">
    <fieldset>
      <legend>Distributors</legend>
      <table class="table table-striped table-bordered">
        <tbody>
          <tr>
            <th style="width:22%;">Name</th>
            <th style="width:15%;">Phone</th>
            <th style="width:12%;">Email</th>
            <th style="width:6%;">&nbsp;</th>
          </tr>
          <tr ng-repeat="dis in dist.distributors" ng-dblclick="rowform.$show()">
            <td>
              <span editable-text="dis.name" e-name="name" e-form="rowform" e-style="width:100%;">
                  {{ dis.name || '--' }}
                </span>
            </td>
            <td>
              <span editable-text="dis.phone" e-name="phone" e-form="rowform" e-style="width:100%;">
                  {{ dis.phone|phone }}
                </span>
            </td>
            <td>
              <span editable-text="dis.email" e-name="email" e-form="rowform" e-style="width:100%;">
                  {{ dis.email || '--' }}
                </span>
            </td>
            <td style="white-space: nowrap">
              <!-- form -->
              <form editable-form="" name="rowform" onbeforesave="dist.saveRecord($data, dis.id)" ng-show="rowform.$visible" class="form-buttons form-inline" shown="inserted == distributor">
                <button type="submit" ng-disabled="rowform.$waiting">
                  <span class="glyphicon glyphicon-ok-sign" style="color:#006837;"></span>
                </button>
                <button type="button" ng-disabled="rowform.$waiting" ng-click="rowform.$cancel()">
                  <span class="glyphicon glyphicon-remove-sign" style="color: #990000;"></span>
                </button>
              </form>
              <div class="buttons" ng-show="!rowform.$visible">
                <span class="glyphicon glyphicon-trash" style="color: #990000;" ng-click="dist.removeRecord($index, dis.id)"></span>
              </div>
            </td>
          </tr>
        </tbody>
      </table>
      <p>
        <a ng-click="dist.insertRecord()" class="btn btn-xs btn-default">
          <span class="glyphicon glyphicon-plus-sign" style="color:#006837;"></span>


 Add New</a>
      </p>
    </fieldset>
  </body>

and my controller

(function(){
  'use strict';
  angular
    .module('app')
    .controller('DistributorsController', DistributorsController);

    DistributorsController.$inject = ['$filter'];

    /* @ngInject */
    function DistributorsController($filter) {
      /* jshint validthis: true */
      var vm = this;

      vm.distributors = [
        {id: 1, name: "Jonah's Whale", phone: '3185551212', email: 'jwhale@distributors.org'},
        {id: 2, name: "Paul's Thorn", phone: '5015551212', email: 'pthorne@distributors.org'},
        {id: 3, name: "Lot's Wife", phone: '5045551212', email: 'lwife@distributors.org'}
      ];

    }
})();

Solution

Doc Says

To show several editable elements together and submit at once you should wrap them into tag. The name attribute of form will create variable in scope (normal angular behavior) and editable-form attribute will add a few methods to that variable:

You need to have ng-form attribute on each tr as other elements are not supported in table tag

Markup

<tbody>
    <tr ng-form editable-form name="editableForm" 
        ng-repeat="dis in dist.distributors" ng-dblclick="rowform.$show()">
           ...................    
           ..editable input elements here..
           ...................
    </tr>
</tbody>

Wokring Plunkr