Как обновить $ scope при отправке из модального?

У меня есть следующий код (я не мог поместить весь код здесь, поскольку он довольно большой, поэтому я извлек только то, что подходит для этого вопроса).

Я могу добавлять элементы (через отдельную форму, которую я где-то еще называю addItem() на ng-submit) и перечислить их на странице. Когда я нажимаю кнопку "Редактировать", рядом с каждым элементом, открывается модальная панель с информацией о текущем элементе. Но по мере изменения значений они автоматически обновляются в области $ из-за двусторонней привязки данных.

То, что я пытаюсь достичь, заключается в том, что текущий элемент и область $ обновляются только после отправки формы (нажав кнопку отправки), таким образом я также могу нажать кнопку "Отмена" и прервать операцию. Я угадываю какую-то функцию Update, но не уверен, что добавить туда.

Кроме того, я повторяю один модальный для каждого элемента в элементах, но я не думаю, что это лучшая практика. Любое предложение о том, как оптимизировать это, приветствуется.

Третья часть моего вопроса: как показать элемент ng-model item.color как "выбранный" из списка параметров, когда модальные нагрузки?

JS

$scope.colors = [
  "blue",
  "green",
  "red"
];

$scope.items = [
  {
   name: "apple",
   color: "red"
  },
  {
   name: "pear",
   color: "green"
  }
];

$scope.addItem = function (itemName,itemColor) {
  $scope.items.push({
    name: itemName,
    color: itemColor
  });
};

$scope.editItem = function () {
  ???
};

HTML

<ul>
  <li ng-repeat="item in items">
    <span>{{$index}} - {{item.name}} - {{item.color}}</span>
    <button data-toggle="modal" data-target="#itemEditModal{{$index}}">
      Edit
    </button>
  </li>
</ul>

<div class="modal fade" ng-repeat="item in items" id="itemEditModal{{$index}}">
  <div class="modal-dialog">
    <form ng-submit="editItem(item)">
      <div class="modal-content">
        <div class="modal-body">
          <div class="form-group">
            <label>Name</label>
            <select class="form-control" ng-model="item.color" ng-options="color in colors">
            </select>
          </div>
          <div class="form-group">
            <label>Name</label>
            <input type="text" ng-model="item.name">
          </div>
        </div>
        <div class="modal-footer">
          <button type="button" data-dismiss="modal">Cancel</button>
          <button type="submit">Save changes</button>
        </div>
      </div>
    </form>
  </div>
</div>