Angular ng-repeat обновляет вид, но не правильно, при изменении размера массива

Я знаю, что название вопроса знакомо SO. Я рассмотрел много вопросов и попробовал их решения, но почему-то я все еще застрял.

Ну, у меня есть массив A, который повторяется, чтобы сформировать строку полей ввода. У меня есть кнопка ADD, чтобы добавить новую строку, где я в основном помещаю фиктивный элемент в этот массив (чтобы его длина увеличивалась, а в пользовательском интерфейсе отображалась еще одна строка). Данные из поля ввода хранятся в самом массиве A в строке $index.

Ну, это все работает нормально. Но когда я удаляю строку (у меня есть еще одна кнопка для ее удаления). При удалении я передаю $index строки и делаю splice по этому индексу.

Я ожидал, что элемент с этим индексом будет удален, что приведет к удалению этой строки из пользовательского интерфейса. Но что происходит на самом деле:

Элемент удаляется из массива A, и одна строка также удаляется из пользовательского интерфейса. Но это не та строка, в которой была нажата кнопка УДАЛИТЬ. Скорее последняя строка удаляется из пользовательского интерфейса (независимо от того, где вы нажимаете УДАЛИТЬ).

Я без понятия, что происходит? Находил разные похожие вопросы, пробовал много чего, но ничего не получилось :(

Ниже приведен соответствующий код. В этом коде home является псевдонимом контроллера, т.е. controllerAs : home:

<div ng-repeat= "d in home.degrees track by $index" class="inline_block name_container">
         <div class="inline_block aw_div_first">
          <label>College/University/Board:</label></br>
          <input class="form-control pd-forms" type="text"  ng-model="home['degree'][$index]['college']" placeholder="College/University/Board"/>
         </div>
         <div class="inline_block aw_div">
          <label>Qualification:</label></br>
          <input class="form-control pd-forms" type="text"  ng-model="home['degree'][$index]['qual']" placeholder="Qualification"/>
         </div>
         <div class="inline_block aw_div">
          <label>Passing Year:</label></br>
          <input class="form-control pd-forms" type="text"  ng-model="home['degree'][$index]['year']" placeholder="Passing Year"/>
         </div>
         <div class="btn btn-primary inline_block aw_button" ng-click="home.addDegree($index, home['degree'][$index])" ng-if="$index === home.degrees.length - 1">+</div>
         <div class="btn btn-primary inline_block aw_button" ng-click="home.removeDegree($index)" ng-if="($index <= home.degrees.length - 1) && home.degrees.length > 1">-</div>
    </div>

Контроллер:

vm.degrees = [1]; //initialising array with one element to show one row initially

function addDegree(i, data){
            var degree ={};
            degree.college = data.college;
            degree.qual = data.qual;
            degree.year = data.year;
            vm.degrees[i] = degree;
            vm.degrees.push(1);
            console.log("current degrees : ", vm.degrees);
        }

        function removeDegree(i){
            vm.degrees.splice(i,1);
        }