Одноэлементная таблица встроенного редактирования Angular

Я смог получить желаемый результат, обновив функции editContact и reset до следующего:

$scope.editContact = function(contact, event) {
  // Nothing first time, but will have an element second time
  $timeout(function() {
    // Click the element and remove the class since it is not in edit mode anymore
    angular.element('.row-edit-mode').triggerHandler('click');
    angular.element('.row-edit-mode').removeClass('row-edit-mode');

    // If it is not a button, then it is the fa-icon, so get its parent, which is a button
    var eventElement = angular.element(event.target).is('button') ? event.target : event.target.parentNode;
    // Find it's sibling with given id, and add a class to it
    angular.element(eventElement).siblings("#table-cancel").addClass('row-edit-mode')

    $scope.model.selected = angular.copy(contact);
  });
};

$scope.reset = function() {
  // Remove class on cancel
  angular.element('.row-edit-mode').removeClass('row-edit-mode');
  $scope.model.selected = {};
};

http://plnkr.co/edit/vAACyxv2bE0li5muefsQ?p=preview

Я все еще вижу небольшое мерцание между переключателями, поэтому, если у кого-то есть предложения сделать его более плавным, я буду очень признателен.

Если я не увижу других ответов, которые приведут к желаемому результату в течение нескольких дней, я отмечу этот ответ как принятый. Спасибо всем, кто предложил помощь!

Вы можете передать индекс операции ng-repeat вашей функции editContact следующим образом, используя переменную $index (уже встроенную в операцию ng-repeat):

 <button class="edit-btn" ng-show="edit != true" id="table-edit" ng-click="edit = true; editContact(contact, $index);" uib-tooltip="Delete" tooltip-trigger="mouseenter" tooltip-placement="bottom"><i class="fa fa-fw fa-pencil"></i></button>

Обратите внимание, что я также дал кнопке имя класса!!

Затем в вашем файле app.js вы можете установить отображение других кнопок на none, когда одна кнопка срабатывает для редактирования. Затем, когда редактирование будет сохранено, установите отображение на блокировку:

var eles = document.getElementsByClassName('edit-btn');

$scope.editContact = function (contact, ind) {

    $scope.model.selected = angular.copy(contact);

    //remove display of other buttons
    for(var i = 0; i < eles.length; i++){
      if(i != ind){
        eles[i].style.display = "none";
      }
    }

};

$scope.saveContact = function (idx) {
    console.log("Saving contact");
    $scope.model.contacts[idx] = angular.copy($scope.model.selected);

    //redo display of all buttons
    for(var i = 0; i < eles.length; i++){
        eles[i].style.display = "block";
    }

    $scope.reset();
};

Вы можете видеть, что внутри кнопки editContact переменная ind является индексом текущей нажатой кнопки редактирования.

Вот плункер: http://plnkr.co/edit/N9EKErLJkFR5TwEzImNP?p=preview