angular xeditable prevent onclick open all fields in edit mode

Question

I am using angularjs xeditable for one of the fields in my form.
PLUNKER LINK
I add shops using google maps api autocomplete. I can add as many as I want. City and country fields get updated accordingly, and also the address field, which is in xeditable format.

The problem is:

When I have multiple shops, and I want to edit the address field (which is xeditable), when I click on the xeditable field, all of the xeditable fields open up and go on edit mode.
How can I only limit it to the one clicked and not others?

<form editable-form name="myxedit">
   <fieldset ng-repeat="shop in myModel.shops track by $index">
...
    <div>
      <span e-name="erer" class="editable-click" ng-click="$form.$show()" ng-disabled="myxedit.$waiting" e-ng-blur="$form.$hide()" href="#" editable-text="shop.address">
        {{ shop.address || 'empty' }}
      </span>
      <span ng-show="myxedit.$visible">
        <button type="submit" class="btn btn-primary" ng-disabled="myxedit.$waiting">
          <span class="glyphicon glyphicon-ok"></span>
        </button>
        <button type="button" class="btn btn-default" ng-disabled="myxedit.$waiting" ng-click="myxedit.$cancel()">
            <span class="glyphicon glyphicon-remove"></span>
        </button>
      </span>
    </div>
...
  </fieldset>
</form>

Answer 1

The reason for above behaviour is that your ng-repeat is inside the form. With xeditable, your one element should be one form. Change your code as follows and it will fix the problem.

<div>
    <span e-name="erer" class="editable-click" ng-click="$form.$show()" ng-disabled="myxedit.$waiting" e-ng-blur="$form.$hide()" href="#" editable-text="shop.address">
              {{ shop.address || 'empty' }}
          </span>
    <form editable-form name="myxedit">
      <span ng-show="myxedit.$visible">
              <button type="submit" class="btn btn-primary" ng-disabled="myxedit.$waiting">
                <span class="glyphicon glyphicon-ok"></span>
      </button>
      <button type="button" class="btn btn-default" ng-disabled="myxedit.$waiting" ng-click="myxedit.$cancel()">
        <span class="glyphicon glyphicon-remove"></span>
      </button>
      </span>
    </form>
  </div>

Please note that here we have separate form for each ng-repeat item.