AngularJS UI-Sortable two way binding issue

Question

I hope to explain this in simplest way possible but if something is unclear please let me know.

I'm using AngularJS UI-Sortable for drag and drop functionality on a project. Everything is working fine from drag and drop perspective. It takes the item it clones it in the dropable area as expected.

But the issue that I'm having is when the item is dropped I want to allow the user to edit the text.

    <div id="main_page" ui-sortable="sortableOptions" class="drop-area connected-drop-target-sortable" ng-model="selectedComponents">
    <div ng-repeat="component in selectedComponents track by $index" class="eq-height">
        <a href="#" group="content">
            <div class="element">

               <!-- Heading - Affected area -->
               <div class="component" ng-if="component.title == 'Heading'" ng-init="editing = false">
                  <input class="heading" ng-blur="editing = false" ng-hide="!editing" type="text" placeholder="Heading" ng-model="component.element" />
                  <h2 ng-click="editing = true" ng-hide="editing" ng-bind-html="component.element">{{component.element}}</h2>
               </div>

            </div>
        </a>
    </div>
</div>

That part works fine too. But if I drop the second heading or more two way binding updates all Headings that were dropped.

So then I thought maybe I need to pass $index in ng-model so angular knows which one is being updated as such:

<div id="main_page" ui-sortable="sortableOptions" class="drop-area connected-drop-target-sortable" ng-model="selectedComponents">
        <div ng-repeat="component in selectedComponents track by $index" class="eq-height">
            <a href="#" group="content">
                <div class="element">

                   <!-- Heading - Affected area -->
                   <div class="component" ng-if="component.title == 'Heading'" ng-init="editing = false">
                      <input class="heading" ng-blur="editing = false" ng-hide="!editing" type="text" placeholder="Heading" ng-model="component.element[$index]" />
                      <h2 ng-click="editing = true" ng-hide="editing" ng-bind-html="component.element[$index]">{{component.element[$index]}}</h2>
                   </div>

                </div>
            </a>
        </div>
    </div>

But unfortunately that did not have any affect. Here is an image of the issue if its any help.