Angularjs: Facing issue with ng-change and ng-iterate

Question

Problem Description:

1. Whenever I try to select elective from dropdown1, the same subject code & subject credit gets populated for 2nd elective as well.
2. Whenever I try to select the last value of dropdown, the subjecty code & subject credit remains unchanged (i.e., previous value is displayed).

I have browsed the stack overflow on posts related to this scenario. But, I couldn't find solution as this scenario is very specific. That's the reason, why I'm posting this question.

I'm a complete newbie to angularjs. Any help would be greatly appreciated. Thanks in advance!

CalculateResult.html:

<tr ng-repeat="x in subjects">
<td ng-if="x.subjectCode.indexOf('ELECTIVE') == -1">{{ x.subjectCode }}</td>
<td ng-if="x.subjectName.indexOf('ELECTIVE') == -1">{{ x.subjectName }}</td>            
<td ng-if="x.subjectCode.indexOf('ELECTIVE') != -1">{{ elective.electiveSubjectCode }}</td>
<td ng-if="x.subjectName.indexOf('ELECTIVE') != -1" ng-model="elective" ng-init="increment()">
    <select class="form-control" ng-init="elective = electives[index][0]" ng-model="elective" ng-options="elective.electiveSubjectName for elective in electives[{{index}}]" ng-change="changeSelectedItem(elective.electiveSubjectCode,elective.electiveCredit)" required>
    </select>
</td>
</tr>

CalculateResult.js:

var app=angular.module('myApp',[]);
app.controller('myCtrl',function($scope,$http,$window){
  $scope.title = sessionStorage.getItem('title');
  var length = sessionStorage.getItem('length');
  $scope.subjects = [];
  for(var i=0;i<length;i++)
  {
$scope.subjects.push({subjectCode:sessionStorage.getItem('subjectCode'+i),subjectName:sessionStorage.getItem('subjectName'+i),credit:sessionStorage.getItem ('credit'+i)});
  }     

  $scope.noOfElectives = sessionStorage.getItem('noOfElectives');
  $scope.electives = [];
  $scope.electiveArray = [];
  $scope.elective = {};
  for(var i=1;i<=$scope.noOfElectives;i++)
  {
      $scope.electiveArray = [];  
      for(var j=1;j<=sessionStorage.getItem('electiveLength'+i);j++)
      {
        $scope.elective = {electiveSubjectCode:sessionStorage.getItem('electiveSubjectCode'+i+j),electiveSubjectName:sessionStorage.getItem('electiveSubjectName'+i+j),electiveCredit:sessionStorage.getItem('electiveCredit'+i+j)};
        $scope.electiveArray.push($scope.elective);
      }
      $scope.electives.push($scope.electiveArray);
  }   
$scope.elective.electiveSubjectCode = '--';
$scope.elective.electiveCredit = '--';
$scope.index = -1; 
$scope.increment=function(){
  $scope.index = $scope.index + 1;
}    
$scope.changeSelectedItem=function(electiveSubjectCode,electiveCredit){ 
  $scope.elective.electiveSubjectCode = electiveSubjectCode;
  $scope.elective.electiveCredit = electiveCredit; 
}});

Problem - 1: Whenever I try to select elective from 1st dropdown, the subject code & subject credit gets populated for 2nd elective as well.

Problem - 2: Whenever I try to select the last value of dropdown, the subject code and subject credit remains unchanged (i.e., previous value is displayed)